CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user1184100
user1184100

Reputation: 6894

Get object of selected slider - JQUERY UI

I'm using JqueryUI range slider which has multiple handles. How can I get the jQuery object of the handle when I start to slide?

Example : http://jqueryui.com/slider/#range

I tried ..

$('#slider-range').slider({
    range: true,
    min: 10,
    max: 180,
    values: [ this.startDefaultVal, this.endDefaultVal ],
    slide: function( event, ui ) { }
});

$('#slider-range').on( "slidestart", function( event, ui ) {
    console.log(ui);   // get the slide object which is being dragged
});
$('#slider-range').on( "slidestop", function( event, ui ) {
    console.log(ui); // get the slide object which is being dragged
});

UI is a complete slider object but on start and stop I want to know which of the two sliders I'm actually dragging ?

Upvotes: 1

Views: 1368

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388416

ui.handle should give you the dragged handle

$('#slider-range').on( "slidestart", function( event, ui ) {
         console.log('s',ui.handle);   // get the slide object which is being dragged
});

Demo: Plunker

Upvotes: 2

DrColossos
DrColossos

Reputation: 12998

Quoting from the docs. 

ui
Type: Object

   handle
   Type: jQuery
   The jQuery object representing the handle being moved.

So you should be able to use ui.handle to get a regular jQuery object and read its id/class/...

$('#slider-range').on( "slidestop", function( event, ui ) {
    ui.handle // the slide jQuery object
});

Upvotes: 2

Related Questions