使jQuery UI滑块可点击不可拖动

Question

我正在使用jQuery UI 1.10.3。我正在寻找滑块小部件不可拖动的实例。我希望用户只能点击滑块上的值。

我已经尝试eventDefault对滑块的启动方法..这并没有工作（无响应的滑块）。 http://jsfiddle.net/3hTUz/

Answer 1

$("#slider").slider({ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50 
}).on({ 
    slide: function(e,ui) { 
     $(this).data('v', ui.value); 
     e.preventDefault(); 
    }, 
    mousedown: function() { 
     var that = this; 
     setTimeout(function() { 
      var v = $(that).data('v'); 
      $(that).slider('value', v); 
     },2); 
    } 
}); 

$("#slider-value").html( $('#slider').slider('value')); 

FIDDLE

Answer 2

只需添加draggable: false您这样的代码

$("#slider").slider(
{ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50, 
    draggable: false, 
      slide: function(event, ui) { 
       $("#slider-value").html(ui.value); 
      }, 
      start: function(event, ui) { 
       //event.preventDefault(); 
      }, 
} 
); 

$("#slider-value").html( $('#slider').slider('value'));