通过捕捉使拇指穿过一条小径

Question

首先，互动下面的示例。

此组件必须完全像输入类型范围一样工作。 我遇到的问题是计算步长值，和根据当前步长的比例和最大值（再次是，与范围输入< / em>）。

欢迎使用本机范围输入来控制此行为的任何响应。我之所以没有使用它，只是因为它不平滑。

const thumb = document.querySelector(".stepper__step");
const trail = document.querySelector(".stepper__trail");

// Variables that controls the range snap and values
var minVal = 0;
var maxVal = 20;
var step = 2;

thumb.ondragstart = function() {
  return false;
};

thumb.addEventListener("mousedown", function(event) {
  event.preventDefault();
  addGrabbingClassFromThumb();

  let shiftX = event.clientX - thumb.getBoundingClientRect().left;
  // shiftY not needed, the thumb moves only horizontally

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);

  function onMouseMove(event) {
    let newLeft = event.clientX - shiftX - trail.getBoundingClientRect().left;

    // the pointer is out of trail => lock the thumb within the bounaries
    if (newLeft < 0) {
      newLeft = 0;
    }
    let rightEdge = trail.offsetWidth - thumb.offsetWidth;
    if (newLeft > rightEdge) {
      newLeft = rightEdge;
    }

    thumb.style.left = newLeft + "px";
  }

  function onMouseUp() {
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);
  }
});

thumb.addEventListener("mouseup", function() {
  removeGrabbingClassFromThumb();
});

function addGrabbingClassFromThumb() {
  thumb.className += " stepper__step--grabbing";
}

function removeGrabbingClassFromThumb() {
  thumb.className = thumb.className.replace(/stepper__step--grabbing/g, "");
}

body {
  background-color: #333333;
}

.stepper-wrapper {
  width: 350px;
  margin: 80px auto;
  position: relative;
}

.stepper__trail {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.25);
}

.stepper__step {
  height: 20px;
  position: absolute;
  left: 0;
  width: 50px;
  bottom: 0;
  transition: left 0.25s ease-in-out;
  cursor: -webkit-grab;
  cursor: grab;
}
.stepper__step:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  background-color: #fff;
}

.stepper__step--grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  transition: unset;
}

<div class="stepper-wrapper">
  <div class="stepper__step"></div>
  <div class="stepper__trail"></div>
</div>

Answer 1

我认为您只是缺少一些计算和辅助功能来确定如何。

首先，我们需要包装器

const wrapper = document.querySelector('.stepper-wrapper');

接下来，我们需要计算一些值以生成我们的测距点：

const containerWidth = wrapper.offsetWidth
const pixelsPerStep = Math.round(containerWidth / maxVal)
const totalSteps = Math.round(pixelsPerStep / step);

快速的一对帮助函数可以生成我们的范围并找到最接近的要捕捉的点：

const range = (start, stop, step = 1) =>
  Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step)

const closest = (range, goal) => {
  return range.reduce((prev, curr) => {
    return (Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev)
  })
}

在mousedown事件监听器中，我们可以生成可以捕捉的点：

const snapTo = closest(rangePoints, newLeft);

这可用作.left元素的thumb属性。

jsFiddle进行说明。