使jQuery UI Slider可點擊不可拖動

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') );

小提琴

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') );