jQuery UI Slider范围：保持按钮在范围内[关闭]

Posted 2021-04-12

有没有办法重新设计jQuery UI滑块范围，以便按钮保持在滑块div中，并且不会像下面的屏幕截图中那样重叠？

答案

对于左端，您只需修改“.ui-slider-horizo​​ntal .ui-slider-handle”的css，然后删除“margin-left：-.6em;”

右端需要修改javascript，ui / widgets / slider.js文件。关于github（qazxsw poi）的最新代码，这是在602行

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/slider.js

“valPercent”将是0-100之间的变量，用作左起的百分比。您需要通过处理程序与整个滑块的比例来减少此值。即

valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100;

用实际值替换它们（我们使用滑块的这个，因为我们在循环中通过句柄），你会得到：

valPercent *= (sliderWidth - handlerWidth)/sliderWidth

将这个放在第603行后，这将适用于具有多个手柄的滑块。对于单个句柄，您将对第645行执行相同操作，使用以下代码：

valPercent *= (that.elementSize.width- $(this).width())/that.elementSize.width