CODEWITHSUNDEEP
javascriptjqueryjquery-ui-slider
user1499220
user1499220

Reputation: 419

how do you disable a handle in a multiple handles slider?

I need a slider with 2 handles, one draggable and the other fixed . I'm using Jquery UI Slider. Here is what I've tried so far :http://jsfiddle.net/8KnJ7/210/

$("#slider").slider({
      values:[1,1],
      min:0,
      max:5,
      slide: function(event, ui) {
        $(ui.handle).text(ui.value);
      }
   });
   var value = $("#slider").slider("values",0);
   $("#slider").find(".ui-slider-handle").text(value);

My problem is that I couldn't disable one handle and keep the other draggable. Basically, the fixed handle should show the actual rate, and the draggable one should show the rate that we want to set. I thought of keeping only one handle (the draggable one), and show on the slider the actual value as a bar in a different color but I couldn't show anything right on the slider.

Upvotes: 1

Views: 819

Answers (1)

Trevor
Trevor

Reputation: 16116

Take a look at this example. 

$("#slider").slider({
  values:[1,1],
  min:0,
  max:5,
  slide: function(event, ui) {
    $(ui.handle).text(ui.value);
  },
  start: function( event, ui ) {
      if($(ui.handle).hasClass('stay'))
          return false;
  }
}); 
var value = $("#slider").slider("values",0);
$("#slider").find(".ui-slider-handle").text(value); 
$('#slider .ui-slider-handle:last').addClass('stay');

http://jsfiddle.net/8KnJ7/211/

Upvotes: 3

Related Questions