jQuery UI Slider自定义步骤

时间:2013-01-07 13:24:39

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

我有一个滑块,范围从1007-13138到75步。但我需要添加2个超出75范围的自定义步骤,例如。 2013年& 8759.这两个值是指定滑块的起点和终点的值,因此我希望能够在滑动时选择它们。任何建议或帮助将不胜感激 - 这是我第一次使用滑块,并不太确定它的功能,谢谢。

HTML

<div id="slider" data-start="2013" data-end="8759"></div>
<div id="slider-result"></div>

的jQuery

$('#slider').slider({
    value: $('#slider').data('end'),
    min: Math.round($('#slider').data('start') / 2),
    max: Math.round($('#slider').data('end') * 1.5),
    step: 75,
    slide: function (event, ui) {
        $('#slider-result').html(ui.value);
    }
});
$('#slider-result').html($('#slider').slider('option', 'value'));

jsFiddle

1 个答案:

答案 0 :(得分:1)

您可以保持步骤1,并且在更改-event中,如果所选值不是75的倍数(值%75!= 0),则将值的提醒添加(或减去...)以获得75的倍数,并将其设置为值。

然后为那些不是75的倍数的两个特定值添加例外。

并且你可能想要某种按钮(在滑块的任一端)将滑块设置为两个魔术值。

您没有提供有关您希望使用此功能的原因的详细信息,因此很难说明最佳可用性是什么。