Question

I have four identical sliders of the same class mySliderClass but with different id attributes: s1, s2, s3, and s4. I set up each slider with this HTML code:

<span class="mySliderClass" data-role="fieldcontain"> %
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
</span>

Then I set the id attribute of each element of $(“.mySliderClass”) to s1, s2, s3, and s4.

I tried this javascript code to test retrieving the id and value of a slider after a mouseup event:

$( ".mySliderClass" ).bind( "mouseup", function(event, ui) {
    var sliderID = $(this).attr('id');
    console.log(sliderID);
    var sliderValue = $(this).val();
    console.log(sliderValue);
});

My console indicates that the correct id of any given slider is returned when that slider’s handle is released. However, $(this).val() always returns a blank string. Additionally, it appears that certain slider events such as change are not detected at all. I’ve been looking at the documentation for several hours now, but I still can’t find out what’s wrong.

Answer 1

This is because you are binding to the span. The span is defined without an id and without a value.

Instead, bind the mouseup event to the actual slider inside the span by changing the selector:

$( ".mySliderClass input[type='range']" ).bind( "mouseup", function(event, ui) {
    var sliderID = $(this).attr('id');
    console.log(sliderID);
    var sliderValue = $(this).val();
    console.log(sliderValue);
});

Also, with your code, I’m not sure why the id is returned (it shouldn’t be). I tested on chrome and received a value of undefined for the id.