jQuery UI slider - 禁用轨道上的滑动/启用 handle mousedown

Question

我有一个 jQuery UI slider ，当用户尝试使用轨道滑动时我想禁用它。它应该仅在有人将 handle 拖动到某处时才起作用/启用。应禁用单击并尝试拖动滑动来移动 handle 。我不确定是否可以使用 unbind 或 mousedown 事件来完成此操作。

我注意到的问题是，我的句柄从 1 变为 100。当您移动句柄的开头时，它会显示使用 ui.value。但是，如果您尝试超出 handle 并在 slider 轨道上滑动，ui.value 会重置其值。

所以，我想禁用非 handle 拖动。

Answer 1

这可以使用 2 行 css 代码来完成!

这是 HTML

<div class="SliderContainer"><div id="BGS0"></div></div>

这是JS

$('#BGS0').slider();

这是CSS

.SliderContainer {
   pointer-events: none;
   /* Other settings here */
}

.SliderContainer > .ui-slider .ui-slider-handle {
pointer-events: auto;
/* Other settings here */
}

注意:我使用 SliderContainer 类作为父 DIV，因为默认情况下此 DIV 内禁用任何指针事件。然后我仅为 slider handle 启用了指针事件。只有父 DIV 内的 slider 受此选项影响，因为我使用了 .SliderContainer > .ui-slider .ui-slider-handle 选择器。