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

【问题标题】：jQuery UI Slider Range: keep button in range [closed]jQuery UI Slider Range：将按钮保持在范围内[关闭]
【发布时间】：2019-02-12 02:05:01
【问题描述】：

有没有办法重新设计 jQuery UI 滑块范围，这样按钮就会留在滑块 div 中并且不会像在下面的截图？

【问题讨论】：

【解决方案1】：

对于左端，你可以只修改“.ui-slider-horizontal .ui-slider-handle”的css，并删除“margin-left: -.6em;”

右端需要修改 javasript，ui/widgets/slider.js 文件。在 github 上的最新代码 (https://github.com/jquery/jquery-ui/blob/master/ui/widgets/slider.js) 上，这是在第 602 行

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

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

valPercent *= (sliderWidth - handlerWidth)/sliderWidth

将它们替换为实际值（我们将其用于滑块，将其用于手柄，因为我们处于循环遍历手柄的状态），您会得到：

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

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

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

【讨论】：