如何使用普通 javascript 创建输入范围

Question

有什么方法可以使用纯 js 重新创建输入范围（不使用 jQuery）。

预期结果

<input type="range">

我目前的工作

function slide(e,t) {
    t.style.paddingLeft = e.clientX-t.offsetLeft+'px';
}

div {
    width : 400px;
    height: 10px;
    background-color: #aaa;
    margin: 20px 0;
    box-sizing: border-box;
}

div>div {
    height: 10px;
    width : 10px;
    background-color: black;
    border: 1px solid black;
    transform: translate(-10%, -10%);
}

<div onclick="slide(event,this)" onmouseover="slide(event,this)">
    <div></div>
</div>

问题

在实际的输入范围内，拇指只有在我们拖动它时才会移动，但在这里它会在我们将鼠标悬停在它上面时移动。当我们只拖动它时，有什么办法可以移动它吗？。即使在同一页面中有许多滑块的示例中也是如此。

非常感谢任何帮助改写问题的帮助。

Answer 1

这是你想要的吗？

function slide(e,t) {
    t.children[0].style.paddingLeft = e.clientX-t.offsetLeft+'px';
}

div {
  position:relative;
  width: 400px;
  max-width:400px;
  height: 10px;
  background-color: #efefef;
  border-radius: 10px;
  border: 1px solid #d6d6d6;
/*   margin: 20px 0; */
  box-sizing: border-box;
  cursor: pointer;
}

div > div {
/*   position: absolute; */
  top: -2px;
  height: 14px;
  width: 14px;
  background-color: #0075FF;
  border: 1px solid black;
/*   transform: translate(-50%, -50%); */
  max-height: fit-content;
}

div > div:after{
  content: '';
  position: absolute;
  background: #0075FF;
  border-radius: 50%;
  top: -4px; 
  right: -4px;
  height: 20px;
  width: 20px;
}

Mouse Click only
<br>
<br>
<div onclick="slide(event,this)" >
    <div></div>
</div>
<br>
<br>
<br>
Mouse Move
<br>
<br>
<div onclick="slide(event,this)" onmousemove="slide(event,this)">
    <div></div>
</div>
<br>
<br>
<br>
Mouse Drag
<br>
<br>
<div onclick="slide(event,this)"  draggable="true" ondrag="slide(event,this)">
    <div></div>
</div>

Answer 2

下面是一个例子，说明如何在按下鼠标和移动鼠标时执行此操作：

const slider = document.querySelector(".slider");

let mouseDown = false;

const setMouseDown = () => {
  mouseDown = !mouseDown;

  console.log(mouseDown);
}

slider.addEventListener("mousedown", function(event) {
  window.addEventListener("mouseup", setMouseDown);

  slide(event);

  setMouseDown();
});

slider.addEventListener("mousemove", slide);

function slide(event) {
  if (mouseDown)
    this.style.paddingLeft = event.clientX - this.offsetLeft + 'px';
}

div {
  width: 400px;
  height: 10px;
  background-color: #aaa;
  margin: 20px 0;
  box-sizing: border-box;
}

div>div {
  height: 10px;
  width: 10px;
  background-color: black;
  border: 1px solid black;
  transform: translate(-10%, -10%);
}

<div class="slider">
  <div></div>
</div>

如何使用普通 javascript 创建输入范围

How to create a input range using plain javascript

html

javascript

css

range

预期结果

我目前的工作

问题