Question

I have the following code that implements 2 jQuery sliders:

<script type="text/javascript">
    $(document).ready(function () {
        $("#wheelLeft").slider({ value: 50, min: -100, max: 100, slide: handleSlide });
        $("#wheelRight").slider({ value: -10, min: -100, max: 100, slide: handleSlide });
    });

    function handleSlide(event, ui) {
        $("#lblInfo").text(ui.id + ':' + ui.value);
    }
</script>

As you see, both sliders generate a slide event which is handled by handleSlide function. Inside the handleSlide function, I can get the value of the slider by calling ui.value, but how do i know which slider actually generated the event?

I’ve tried ui.id, ui.name and some others that seemed logical, but they all come back as undefined. How do I get actual name of its CSS implementation (e.g. either #wheelRight or #wheelLeft)?

Thanks.

Answer 1

Try wrapping ui.handle

function handleSlide(event, ui) {
  $("#lblInfo").text( $(ui.handle).attr("id") + ':' + ui.value);
}

Edit: Oops, that returns the “a” element. This should return the parent element id:

$(ui.handle).parent().attr('id')