JQuery UI: range slider. Which slider is moved?

Question

On this demo page: http://jqueryui.com/demos/slider/#event-change

The rewriting of the slide event has two inputs at once:

$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); 

For my purposes, I want to know which of the two sliders has been moved (min or maximum). How can i get this?

Answer 1

@Nikoole, there is no concrete way to find which handle is slipping, but you can try this trick

 var minSlide = 75, maxSlide = 300; $("#slider-range").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { if(minSlide != parseInt(ui.values[0], 10)){ // Do what in minimum handle case } else if(maxSlide != parseInt(ui.values[1], 10)) { // Do what in maximum handle case } }, stop: function(event, ui){ minSlide = parseInt(ui.values[0], 10); maxSlide = parseInt(ui.values[1], 10); } }); 

Hope this helps.

Answer 2

The right slider handler is the last child of the slider container, therefore, unlike the left handler, the right handler does not have nextSibling:

 $('#slider-range').slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function(event, ui) { if (ui.handle.nextSibling) { // Moving LEFT slider ... } else { // Moving RIGHT slider ... } } }); 

Answer 3

Even I have encountered the same problem recently. When using the range slider, you need to determine which slider (right or left) is moved. There is no direct way to determine this, but, however, the ui object has attributes, value and values , which you can use to determine which slider was moved. Here is the solution that worked for me: -

  $( "#slider-range" ).slider({ range: true, min: 75, max: 300, values:[75,300], slide: function( event, ui ) { target_name = '' if(ui.values[0] == ui.value) target_name = 'min_price' else if(ui.values[1] == ui.value) target_name = 'max_price' alert(target_name) } 

Answer 4

The slide event takes two parameters: event and ui. ui contains a handle object. You can get and check the descriptor index like this:

 $("#slider-range").slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) { var index = $(ui.handle).index(); if (index == 1) { // do stuff for minimum } if (index == 2) { // do stuff for maximum } } }); 

This works for any number of pens in this slider. But keep in mind that indexes start with 1 not 0.

Answer 5

I solved this by setting the ID attribute to min and max selectors to create an event defined using the API slider http://api.jqueryui.com/1.8/slider/#event-create .

  create:function(event, ui) { var handlers = $('.ui-slider-handle'); $.each(handlers, function(i, element) { if(i == 0) $(element).attr('id', 'slider-handler-min'); else $(element).attr('id', 'slider-handler-max'); }); } 

... and then again in my slide event, I just have a red attribute id from ui.handler to get which one is being moved :)