jQuery ui slider multiple slider events with common class

Question

I have created multiple jquery ui slider with only one common class. And I'm calling slide event to change text in span on slide. it working fine in the first one but not working on other on because of similar classes.

for better understanding find fiddle demo

jquery ui code I am using:

$(".measSlider").slider({
    orientation: "horizontal",
    range: "min",
    min: 1000,
    max: 30000,
    value: 10000,
    slide: function( event, ui ) {
        $('.measSlider span').html("$ " + $( ".measSlider" ).slider( "values", 0 ));
    }
});
$('.measSlider span').html("$ " + $( ".measSlider" ).slider( "values", 0 ));

Answer 1

You are using class selector and this is affecting all the classes You have to use the same class which is being changed by sliding so use

$(this) instead of class selector in the function

Use following code

$(".measSlider").slider({
    orientation: "horizontal",
    range: "min",
    min: 1000,
    max: 30000,
    value: 10000,
    slide: function( event, ui ) {
        $(this).children('span')
        .html("$ " + $( this).slider( "values", 0 ));
    }
});
$('.measSlider span').html("$ " + $( ".measSlider" ).slider("values",0));