如何缩小jQuery UI滑块的滑动间隔？

你的问题在于当前代码通过在slide事件中直接阻止非目标值的滑动，导致滑块只能跳转到指定的离散值，拖动体验生硬。要实现顺滑的小间隔滑动同时最终停在目标离散值上，可以通过以下方式优化：

核心思路 #

1. 让滑块支持小间隔滑动：设置step为1（或更小的数值，比如0.5，根据需求调整），同时用目标数组的最小/最大值作为滑块的min/max。
2. 拖动时允许自由滑动，松开或滑动过程中自动吸附到最近的目标值，既保证顺滑体验，又不偏离预设的可选值。

优化后的完整代码 #

var pokaz = 12;
var sliderValue = [4, 6, 12, 24];
var minVal = Math.min(...sliderValue);
var maxVal = Math.max(...sliderValue);

$('#pokaz').slider({
  min: minVal,
  max: maxVal,
  step: 1, // 设置滑动间隔为1，拖动更顺滑
  value: pokaz,
  // 滑动过程中实时显示当前拖动值，提升体验
  slide: function(event, ui) {
    $("#pokaz").val(ui.value);
  },
  // 松开滑块时，自动吸附到最近的目标值
  stop: function(event, ui) {
    // 找到离当前滑动值最近的目标离散值
    var closestValue = sliderValue.reduce((prev, curr) => {
      return Math.abs(curr - ui.value) < Math.abs(prev - ui.value) ? curr : prev;
    });
    // 更新滑块最终值
    $(this).slider('value', closestValue);
    // 更新全局变量和显示内容
    pokaz = closestValue;
    $("#pokaz").val(pokaz);
    calc(pokaz);
  }
});

function calc(pokaz) {
  $('#ipokaz').html(pokaz);
}

#pokaz { width: 12.5rem; }

<!-- 引入依赖（注意补全jQuery UI的完整链接） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

关键细节说明 #

• step: 1：这是缩小滑动间隔的核心设置，它让滑块可以以1为单位平滑拖动，你可以根据需求调整为更小的数值（比如0.5）来进一步缩小间隔。
• reduce方法找最近值：通过遍历目标数组，计算当前滑动值与每个目标值的差值，找到最接近的那个，实现自动吸附效果。
• 分离slide和stop事件：slide事件实时显示拖动的数值，让用户感受到顺滑的滑动过程；stop事件在松开滑块时再吸附到目标值，兼顾体验和功能需求。

如果你希望滑动过程中就实时吸附（而不是松开时），可以把stop里的逻辑移到slide事件中，并返回false阻止默认滑动值更新：

slide: function(event, ui) {
  var closestValue = sliderValue.reduce((prev, curr) => {
    return Math.abs(curr - ui.value) < Math.abs(prev - ui.value) ? curr : prev;
  });
  $(this).slider('value', closestValue);
  pokaz = closestValue;
  $("#pokaz").val(pokaz);
  calc(pokaz);
  return false;
}

内容的提问来源于stack exchange，提问作者Andi Crew