向jQueryUI滑块添加填充

有没有一种简单的方法可以将填充添加到jQueryUI滑块的滑块栏中？我希望滑块手柄不能到达杆的末端。如果这是常规的左端：

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

我希望它的左（右）端有填充物：

我在css文件中尝试了以下方法：

.ui滑块水平{高度：.8em；填充：0 10px；}

但jqueryui滑块似乎使用完整的（

outerWidth（）

）宽度来确定句柄的滑动范围，而不是不带填充的宽度。我也尝试过破解代码，用

width（）

替换

outerWidth（）

，但没有任何效果

我明确地不想求助于设置最小值和最大值的技巧。这些值应始终按预期工作

有什么建议吗

编辑：

在pkauko的评论之后；我将滑块用作上面有三个标签的元素：

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

上图显示了我希望控制柄出现的位置，位于标签下方的中心。但是视觉上需要将条拉伸到边缘。

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

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

我还没有测试过它，也不知道它是否有效，我知道这不是你想要的，但我在jqueryui.com上查看jquery UI slider如何工作的示例时想到了这一点

---

编辑：不能放弃这个，现在我知道它的工作方式，防止滑块到达幻灯片的结尾。您只需要相应地设置初始值，以防止在页面加载时滑块位于一端或另一端。

好的，我自己也经常希望这样，但从来没有真正坐下来的动机，所以我就这样做了。 既然你现在问了，我确实坐下来，黑了jQueryUI的滑块，按照你的要求添加了填充选项

注意：我只为带有单个手柄的水平滑块添加了它。其他案件也不复杂。我只是没有动力去做打字和随后的测试，以涵盖那些现在可能不需要的案例

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

简单示例用法：

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

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

(
函数（$，未定义）
{
$.ui.slider.prototype.options=
$扩展(
{},
$.ui.slider.prototype.options，
{
paddingMin:0，
paddingMax:0
}
);
$.ui.slider.prototype.\u刷新值=
函数（）{
变量
橙色=this.options.range，
o=此选项，
self=这个，
动画=（！this._animateOff）？o.animate:false，
百分之十，
_set={}，
元素宽度，
元素高度，
百分之九十，
填充最大百分比，
加垫百分之十，
最后的百分比，
价值
valueMin，
valueMax；
如果（自我定向==“水平”）
{
elementWidth=this.element.outerWidth（）；
paddingMinPercent=o.paddingMin*100/元素宽度；
paddedBarPercent=（elementWidth-（o.paddingMin+o.paddingMax））*100/元素宽度；
}
其他的
{
elementHeight=this.element.outerHeight（）；
填充最小百分比=o.paddingMin*100/元素高度；
paddedBarPercent=（元素高度-（o.paddingMin+o.paddingMax））*100/元素高度；
}
if（this.options.values&&this.options.values.length）{
this.handles.each（函数（i，j）{
瓦尔百分比=
（（self.values（i）-self.\u valueMin（））/（self.\u valueMax（）-self.\u valueMin（））*100）
*填充条百分比/100+填充最小百分比；
_设置[self.orientation===“水平”？“左”：“底部”]=valPercent+“%”；
$（这个）.stop（1，1）[设置动画？：“css”]（_set，o.animate）；
if（self.options.range==true）{
如果（自我定向==“水平”）{
如果（i==0）{
self.range.stop（1，1）[设置动画？“设置动画”：“css”]（{left:valPercent+“%”，o.animate）；
}
如果（i==1）{
self.range[animate？“animate”：“css”]（{width:（valPercent-lastValPercent）+“%”，{queue:false，d
$('#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);