CODEWITHSUNDEEP
javascriptjquerydjangotwitter-bootstrap
Llanilek
Llanilek

Reputation: 3466

Slider for bootstrap with multiple sliders

When it comes to Javascript, I'm somewhat a complete beginner. Having Python behind me, I somewhat understand a little of what's going on. I have been using this library, which is a bootstrap slider (now I'm not referring to a carousel, thats a completely different thing), this is a slider for an input form.

My issue is, that I'm dynamically outputting a form from a Django model, and in this form it could potentially have several of these sliders all going at once.

According to the docs that come with bootstrap-slider, the following code will allow you to pass the value of the slider to the DOM when the slider is moved.

###################
       HTML
###################

<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/&t
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>


###################
    JavaScript
###################

// With JQuery
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
    $("#ex6SliderVal").text(slideEvt.value);
});

// Without JQuery
var slider = new Slider("#ex6");
slider.on("slide", function(slideEvt) {
    $("#ex6SliderVal").text(slideEvt.value);
});)

Now, the problem that's causing me such a big issue, is the way I've had to code this because of Django.

{% for field in filter.field_set.all %}
    <input id="slider-{{ field.pk }}" name="{{ field.filter.title }}" data-slider-id='{{ field.pk }}Slider' type="text" data-slider-min="{{ field.min }}" data-slider-max="{{ field.max }}" data-slider-step="{{ field.step }}" data-slider-value="{{ field.min }}" data-for="slider_value_{{ field.pk }}" data-slider-orientation="vertical"/>
    <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="slider_value_{{ filter.pk }}">3</span></span>
{% endfor %}
$('[id^=slider-]').slider();
$(this).on("slide", function (slideEvt){
    value = this.data('for');
    changer = $(value);
    changer.text(slideEvt.value);
});

I'm totally baffled as to how to approach this. What I'm trying to do, is get the span with the id that's defined in data-slider-label to change the .text value to what the slideEvt.value is.

Upvotes: 1

Views: 1863

Answers (1)

xyres
xyres

Reputation: 21734

Update 2

First of all, you'll need to make sure that the value of data-for of an input and the id of the span associated with it are same. Because that is how you will know which span to change.

So, change the span like this:

<span id="slider_value_{{ field.pk }}">3</span>

Note: If, however, you don't want to change the span's id, you can change the value of data-for to slider_value_{{ filter.pk }}. Just remember, both should match.

Now the JavaScript/jQuery part

$('[id^=slider-]').slider();

$('[id^=slider-]').on("slide", function(slideEvt) {
    changer_span = $(this).attr('data-for');
    $('#' + changer_span).text(slideEvt.value);
});

Upvotes: 2

Related Questions