是否有一种简单的方法可以将填充添加到jQuery UI Slider的滑块？我希望能够让滑块手柄不能到达杆的两端。所以如果这是常规的左端：
no padding
\/
[]------------------
我希望在左侧（和右侧）结束填充：
padding of 10px for instance
\/
--[]----------------
我在css文件中试过这个：
.ui-slider-horizontal { height: .8em; padding: 0 10px; }
但似乎jQuery UI Slider使用完整的（outerWidth()）宽度来确定句柄的滑动范围，而不是没有填充的宽度。我还试图破解代码，将outerWidth()替换为width()，但它没有做任何事情。
我明确地不想诉诸于设置最小值和最大值的黑客。值应始终按预期工作。
有什么建议吗？
修改
根据pkauko的评论;我使用滑块作为在其上方有三个标签的元素：
not very
important important important
----[]-----------[]----------[]----
上图显示了我希望手柄出现的位置，位于标签下方的中心位置。但是酒吧在视觉上需要伸展到边缘。
答案 0 :(得分：8)
好吧，我经常想要自己，但从来没有动机真的坐下来等等。 既然你现在问过，我确实坐下来攻击jQuery UI的滑块，根据你的要求添加填充选项。
注意：我只为单手柄的水平滑块添加了它。其他情况并不复杂。我只是没有动力进行打字和后续测试，以涵盖现在可能不需要的案例。
在您从jQuery UI中包含原始Slider之后包含此代码。扩展名覆盖了几个方法，并将选项'paddingMin'和'paddingMax'添加到Slider小部件中（值必须是数字并且将被解释为像素;显然，这也可以很容易地扩展到其他单位，但是意味着更多的打字/测试目前未经检验的案件。）
简单示例用法：
$('#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);
答案 1 :(得分：3)
“捕捉增量”与“不兼容”（对齐值不均匀）min和max值是否会产生预期的效果？我知道这很可能导致应用程序端值转换，因为这可能无法使用现在使用的值获得，但如果有效的话，这里有一个“hack and slash”'解决方案'。
我建议将最小值设置为750.将捕捉值设置为1200，将最大值设置为4050.这样，最低捕捉量比最小值高450，滑块永远不会到达最左边缘。最大值相同，即3 x 1200 + 450 = 4050.此处使用的值是任意的，仅供参考。
没有测试过这个并且不知道它是否有效，我知道这不是你想要的，但只是想到了一个想法，当我检查jquery UI滑块如何在jqueryui工作的例子。融为一体
编辑：无法放弃这一点，现在我知道这可以防止滑块到达幻灯片的末端。您只需要相应地设置初始值，以防止滑块在页面加载时位于一端或另一端。