如何让noUiSlider的手柄实现重叠？以三中置蓝色手柄为例

noUiSlider默认的多手柄滑块会限制每个手柄不能越过相邻手柄，但可以通过自定义事件处理实现中间手柄自由移动、与其他手柄重叠的效果，具体实现如下：

实现思路 #

通过监听滑块的拖动事件，当拖动中间手柄时，手动独立设置它的值，绕过默认的手柄约束逻辑，让中间手柄可以在整个滑块范围内自由移动，不受左右手柄的位置限制。

修改后的代码示例 #

HTML & CSS #

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
<div id="slider"></div>
<style>
.center-post {
  background: #21A1FF;
  border: 1px solid #21A1FF;
  box-shadow: inset 0 0 1px #21A1FF,inset 0 1px 7px #21A1FF,0 3px 6px -3px #21A1FF;
  z-index: 10; /* 让中间手柄显示在最上层，重叠时能看到 */
}
</style>

JavaScript #

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [30, 50, 75],
    step: 1,
    range: {
        'min': 0,
        'max': 100
    },
    connect: true,
    handleAttributes: [
        {'class': 'noUi-handle'},
        {'class': 'noUi-handle center-post'},
        {'class': 'noUi-handle'}
    ],
});

// 监听拖动事件，处理中间手柄的自由移动
slider.noUiSlider.on('slide', function(values, handleIndex) {
    // 仅处理中间手柄（索引为1）
    if (handleIndex === 1) {
        // 手动设置中间手柄的值，忽略其他手柄的约束
        this.set([null, values[1], null]);
    }
});

关键说明 #

• 监听slide事件，判断当前拖动的手柄索引，仅对中间手柄（索引1）做特殊处理。
• 使用this.set([null, values[1], null])独立更新中间手柄的值，null表示不修改其他手柄的位置，这样就能绕过noUiSlider默认的相邻手柄约束，让中间手柄可以自由移动到任何位置，包括与左右手柄重叠。
• 给中间手柄添加z-index:10，确保重叠时中间手柄能显示在最上层，提升交互体验。

内容的提问来源于stack exchange，提问作者Peter Chimp