向 jQuery UI 滑块添加填充

Question

有没有一种简单的方法可以向 jQuery UI Slider 的滑块添加填充？我希望滑块手柄不会到达杆的末端。因此，如果这是常规的左端：

no padding
\/
[]------------------

我希望它在左（和右）端有填充：

padding of 10px for instance
\/
--[]----------------

我在 css 文件中尝试了此操作：

.ui-slider-horizo​​ntal { height: .8em;内边距：0 10px； 。

但似乎 jQuery UI Slider 使用完整的 ( outerWidth() ) 宽度来确定手柄的滑动范围，而不是没有填充的宽度 我还尝试破解代码，将 outerWidth() 替换为 width()，但它没有做任何事情。

我明确不想诉诸设置最小值和最大值的技巧。这些值应始终按预期发挥作用。

有什么建议吗？

编辑：

遵循pkauko的评论；我使用滑块作为一个元素，上面有三个标签：

   not                      very
important    important    important
----[]-----------[]----------[]----

上图指示了我希望手柄出现的位置，位于标签下方的中心。但该条在视觉上需要拉伸到边缘。

Answer 1

好吧，我自己也经常想要这样，但从来没有动力真正坐下来等等。
既然你现在问了，我确实坐下来修改了 jQuery UI 的滑块以根据你的要求添加填充选项。

注意：我只为带有单个手柄的水平滑块添加了它。其他情况并不复杂。我只是没有动力进行打字和后续测试来覆盖现在可能不需要的案例。

在包含 jQuery UI 中的原始 Slider 后，包含此代码。该扩展覆盖了几个方法，并将选项“paddingMin”和“paddingMax”添加到滑块小部件（值必须是数字，并将被解释为像素；显然，这也可以轻松扩展以采用其他单位，但同样将意味着对当前未请求的情况进行更多的打字/测试）。

简单示例用法：

$('#slider').slider({ paddingMin: 50, paddingMax: 100 });

扩展黑客代码（按原样提供，不要起诉我）：

(
    function($, undefined)
    {
        $.ui.slider.prototype.options =
            $.extend(
                {},
                $.ui.slider.prototype.options,
                {
                    paddingMin: 0,
                    paddingMax: 0
                }
            );

        $.ui.slider.prototype._refreshValue =
            function() {
                var
                    oRange = this.options.range,
                    o = this.options,
                    self = this,
                    animate = ( !this._animateOff ) ? o.animate : false,
                    valPercent,
                    _set = {},
                    elementWidth,
                    elementHeight,
                    paddingMinPercent,
                    paddingMaxPercent,
                    paddedBarPercent,
                    lastValPercent,
                    value,
                    valueMin,
                    valueMax;

                if (self.orientation === "horizontal")
                {
                    elementWidth = this.element.outerWidth();
                    paddingMinPercent = o.paddingMin * 100 / elementWidth;
                    paddedBarPercent = ( elementWidth - ( o.paddingMin + o.paddingMax) ) * 100 / elementWidth;
                }
                else
                {
                    elementHeight = this.element.outerHeight();
                    paddingMinPercent = o.paddingMin * 100 / elementHeight;
                    paddedBarPercent = ( elementHeight - ( o.paddingMin + o.paddingMax) ) * 100 / elementHeight;
                }

                if ( this.options.values && this.options.values.length ) {
                    this.handles.each(function( i, j ) {
                        valPercent =
                            ( ( self.values(i) - self._valueMin() ) / ( self._valueMax() - self._valueMin() ) * 100 )
                            * paddedBarPercent / 100 + paddingMinPercent;
                        _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";
                        $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );
                        if ( self.options.range === true ) {
                            if ( self.orientation === "horizontal" ) {
                                if ( i === 0 ) {
                                    self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { left: valPercent + "%" }, o.animate );
                                }
                                if ( i === 1 ) {
                                    self.range[ animate ? "animate" : "css" ]( { width: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
                                }
                            } else {
                                if ( i === 0 ) {
                                    self.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { bottom: ( valPercent ) + "%" }, o.animate );
                                }
                                if ( i === 1 ) {
                                    self.range[ animate ? "animate" : "css" ]( { height: ( valPercent - lastValPercent ) + "%" }, { queue: false, duration: o.animate } );
                                }
                            }
                        }
                        lastValPercent = valPercent;
                    });
                } else {
                    value = this.value();
                    valueMin = this._valueMin();
                    valueMax = this._valueMax();
                    valPercent =
                        ( ( valueMax !== valueMin )
                        ? ( value - valueMin ) / ( valueMax - valueMin ) * 100
                        : 0 )
                        * paddedBarPercent / 100 + paddingMinPercent;

                    _set[ self.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%";

                    this.handle.stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate );

                    if ( oRange === "min" && this.orientation === "horizontal" ) {
                        this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { width: valPercent + "%" }, o.animate );
                    }
                    if ( oRange === "max" && this.orientation === "horizontal" ) {
                        this.range[ animate ? "animate" : "css" ]( { width: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
                    }
                    if ( oRange === "min" && this.orientation === "vertical" ) {
                        this.range.stop( 1, 1 )[ animate ? "animate" : "css" ]( { height: valPercent + "%" }, o.animate );
                    }
                    if ( oRange === "max" && this.orientation === "vertical" ) {
                        this.range[ animate ? "animate" : "css" ]( { height: ( 100 - valPercent ) + "%" }, { queue: false, duration: o.animate } );
                    }
                }
            };

        $.ui.slider.prototype._normValueFromMouse =
            function( position ) {
                var
                    o = this.options,
                    pixelTotal,
                    pixelMouse,
                    percentMouse,
                    valueTotal,
                    valueMouse;

                if ( this.orientation === "horizontal" ) {
                    pixelTotal = this.elementSize.width - (o.paddingMin + o.paddingMax);
                    pixelMouse = position.x - this.elementOffset.left - o.paddingMin - ( this._clickOffset ? this._clickOffset.left : 0 );
                } else {
                    pixelTotal = this.elementSize.height - (o.paddingMin + o.paddingMax);
                    pixelMouse = position.y - this.elementOffset.top - o.paddingMin - ( this._clickOffset ? this._clickOffset.top : 0 );
                }

                percentMouse = ( pixelMouse / pixelTotal );
                if ( percentMouse > 1 ) {
                    percentMouse = 1;
                }
                if ( percentMouse < 0 ) {
                    percentMouse = 0;
                }
                if ( this.orientation === "vertical" ) {
                    percentMouse = 1 - percentMouse;
                }

                valueTotal = this._valueMax() - this._valueMin();
                valueMouse = this._valueMin() + percentMouse * valueTotal;

                return this._trimAlignValue( valueMouse );
            };
    }
)(jQuery);

Answer 2

“捕捉增量”与“不兼容”（捕捉值不均匀）最小值和最大值相结合是否会产生所需的效果？我知道这很可能会导致应用程序端值转换，因为这可能无法使用现在使用的值来获得，但如果它有效，这里有一个“黑客和斜杠”“解决方案”。

我建议将最小值设置为 750。将捕捉值设置为 1200，将最大值设置为 4050。这样，最低捕捉值比最小值高 450，并且滑块永远不会到达最左边缘。最大值相同，即 3 x 1200 + 450 = 4050。此处使用的值是任意的，仅作为示例。

还没有测试过这个，也不知道它是否有效，我知道这不是您想要的，而只是当我在 jqueryui.com 检查 jquery UI 滑块如何工作的示例时想到的一个想法。

编辑：无法放弃这个，现在我知道它的工作原理是防止滑块到达幻灯片的末端。您只需相应地设置初始值，以防止页面加载时滑块位于一端或另一端。