jquery滑块点更改百分比步骤

Question

但是，我使用的是jQuery UI滑块点，因为有些标签是重叠的，所以我想更改使用的百分比步骤。

例如，我有四个步骤，min:0, max:3。插件按比例划分步骤(在css、left: 0%, 33%, 66%, 100%中)

但我想更改这些，以允许标签显示没有任何重叠，但保留四个步骤(例如left:0%, 20%, 45%, 90%)。

我所做的就是

$j( "span.ui-slider-pip.ui-slider-pip-label.ui-slider-pip-1" ).css('left','20%');

其他百分比也是如此。这移动标签，我想他们，但现在实际的滑块手柄不匹配，当我滑动它，因为它使用的原始百分比。我正在查看插件代码，但看不到在这种特殊情况下我会如何影响它。

如何更改jQuery以将滑块移动到自定义百分比？

Answer 1

不重写滑块插件内核中的_trimAlignValue()方法是不可能的.

$.ui.slider.prototype._trimAlignValue = function() {
    /* your logic here */
};

下面是供参考的源代码：

https://github.com/jquery/jquery-ui/blob/master/ui/slider.js#L518-L537

我做了一个非常快速的游戏，你应该得到一种期望的效果：

$.ui.slider.prototype._trimAlignValue = function(v) { 
    if( v < 0.3 ) {
        return parseFloat( 0 );
    } else if( v < 1 ) {
        return parseFloat( 0.6 );
    } else if( v < 2 ) {
        return parseFloat( 1.35 );
    } else {
        return parseFloat( 2.7 );
    }
}

只要您将滑块的max保持在3，而min保持在。但是，您也可能需要重新调整您的pips来匹配这个修剪对齐值。此外，您还需要将ui.value输出转换为您想要的任何东西，但这应该很简单。

最好，西米。