two jquery sliders having same class name but the issue is on moving the slider -


<div class="slider"></div> <p>your slider has value of <span class="slider-value"></span></p>  <div class="slider"></div> <p>your slider has value of <span class="slider-value"></span></p> 

$(".slider").slider({     value: 1,     min: 0,     max: 100,     step: 1,     slide: function (event, ui) {         $(".slider-value").html(ui.value);     } });  $(".slider-value").html($('.slider').slider('value')); 

http://jsfiddle.net/5ttm4/1899/

this has 2 sliders of same class name , slider value shown in paragraph having same span class, if select slider want value of alone change both changing.

your code in slider's slide function calls $( ".slider-value").html( ui.value );. this, can see, changing inner html of elements class .slider-value. need change selector select relative element instead. that, change:

$( ".slider-value").html( ui.value ); 

to

$(this).next().find('span.slider-value').html(ui.value); 

jsfiddle example


Comments

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

javascript - Highcharts multi-color line -

javascript - Enter key does not work in search box -