jQuery UI Slider - 将两个步骤之间的处理程序设置为默认值

时间:2014-09-09 09:04:14

标签: javascript jquery jquery-ui jquery-ui-slider

是否可以将两个步骤之间的滑块默认值设置为默认值(初始化)

jquery ui slider default value

$( ".slider" ).slider({
    value: 25,
    min: 0,
    max: 50,
    step: 10,
    slide: function( event, ui ) {
        //$( "#amount" ).val( "$" + ui.value );
    },
    disabled: false
});

无效。

我还尝试将css样式设置为:

.ui-slider-handle {
left: 50%;
}

但插件会重置值


更新

我删除了初始化滑块的步骤选项。 滑块开始滑动后,我将步骤设置为10 这将是理想的结果

$( ".slider" ).slider({
    value: 25,
    min: 0,
    max: 50,
    start: function( event, ui ) {
        $(this).slider("option", "step", 10);
    },
    slide: function( event, ui ) {
    },
    disabled: false
});

更新2

如果我将处理程序向右拖动一步,此解决方案会停止,它会跳转到右侧的第二步。关于这种行为的任何解释?

1 个答案:

答案 0 :(得分:0)

在步骤

之间设置处理程序

sice jquery不支持我的拉取请求https://github.com/jquery/jquery-ui/pull/1387我写了一个小代码片段,它将扩展ui.silder小部件

// redefining the ui.slider widgets
        $.widget( "ui.slider", $.ui.slider, {
            _trimAlignValue: function( val ) {
                if ( val <= this._valueMin() ) {
                    return this._valueMin();
                }
                if ( val >= this._valueMax() ) {
                    return this._valueMax();
                }
                var step = ( this.options.step > 0 ) ? this.options.step : 1,
                    valModStep = (val - this._valueMin()) % step,
                    alignValue = val - valModStep;

                if(this.options.initValue == val && Math.abs(valModStep) < step){
                    alignValue += valModStep;
                }else if ( Math.abs(valModStep) * 2 >= step ) {
                    alignValue += ( valModStep > 0 ) ? step : ( -step );
                }
                return parseFloat( alignValue.toFixed(5) );
            }
        });

现在你可以使用&#34; initValue&#34;

创建一个滑块
$( ".slider").slider({
                step: 10,
                min: 10,
                value: 35,
                initValue: 35,
                max: 60})