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

Question

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.

Answer 1

看看这个例子。

$("#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/