jQuery range slider value box for multiple divs

Question

I'm new in js and jQuery and I managed to create a simple slider with a value indicator box under it, that displays the slider's current value. I have used the following code:

HTML

<div class="Slider">
    <input type="range" id="slider" min="0" max="100">
</div> 
<b><div id="Value">value: %</div></b> 

JS

    $(window).on("load", function(){
         var slider = $("#slider");
         slider.change(function(){
             $("#Value").html (" value : " + this.value + "%"); 
        });
    });  

I want to use the same slider in multiple div that are hidden and appear in the same position when i click some links. The problem is that although the slider and the value box appear, the output value which is controlled by the jQuery function won't work but for the first div.

Can anybody tell me what to change to fix this?

Answer 1

The problem is that you're having multiple sliders with the same ID: id="slider" and divs with the same ID: id="Value" . Use class instead of id:

<div class="Slider">
    <input type="range" class="slider-input" min="0" max="100">
    <b><div class="Value">value: %</div></b>
</div>

And then use event delegation like this:

$('.Slider').on('change', '.slider-input', function(){
    $(this).parent().find('.Value').html (" value : " + this.value + "%"); 
});

Of course that if you set a style in your CSS to that element, then you need to replace all the instances of #slider to .slider-input .

A working example:

 $(function() { $('.Slider').on('change', '.slider-input', function(){ $(this).parent().find('.Value').html (" value : " + this.value + "%"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Slider"> <input type="range" class="slider-input" min="0" max="100"> <b><div class="Value">value: %</div></b> </div> <div class="Slider"> <input type="range" class="slider-input" min="0" max="100"> <b><div class="Value">value: %</div></b> </div> <div class="Slider"> <input type="range" class="slider-input" min="0" max="100"> <b><div class="Value">value: %</div></b> </div> 

Answer 2

Using class sliderInputRange it possible to attach one event-handler to multiple input-elements. Attribute sliderInputRange allows to specify the div which receives the value:

<div class="Slider"><input type="range" class="sliderInputRange" min="0" 
   max="100" data-value-id="value1"></div> 
<b><div id="value1">value: %</div></b> 

<div class="Slider"><input type="range" class="sliderInputRange" min="0" 
   max="100" data-value-id="value2"></div> 
<b><div id="value2">value: %</div></b> 

With .attr() the id of the value-element is retrieved:

$(window).on("load", function(){
     var slider = $(".sliderInputRange");
     slider.change(function(){

        var value_id= $(this).attr("data-value-id");

         $("#" + value_id).html (" value : " + this.value + "%"); 
    });
});  

Please try for youreself: https://embed.plnkr.co/peXfdt/

Answer 3

Dynamic add slider.

 var sliderComponent = '<div class="slider_container">' + '<input type="range" class="slider" min="0" max="100">' + '<br>' + 'value: <span class="value"></span>%' + '</div>'; var addSlider = function() { var currentSlider = $(sliderComponent); $(".sliders").append(currentSlider); currentSlider.on("change", ".slider", function() { $(this).siblings(".value").html( $(this).val() ); }); }; $(document).ready(function() { $("button").on("click", addSlider) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add_slider">ADD</button> <div class="sliders"> </div>