[英]Make jQuery UI Slider clickable not draggable
I'm using jQuery UI 1.10.3. 我正在使用jQuery UI 1.10.3。 I'm looking to make an instance of the slider widget non-draggable.
我想要使滑块小部件的实例不可拖动。 I want the user to be able to click to values along the slider only.
我希望用户只能单击滑块上的值。
I have tried eventDefault
on the slider's start method.. That didn't work (unresponsive slider). 我已经在滑块的启动方法上尝试了
eventDefault
..这不起作用(无响应的滑块)。 http://jsfiddle.net/3hTUz/ http://jsfiddle.net/3hTUz/
$("#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') );
Just add draggable: false
to your code like this 只需将
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') );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.