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

Question

Is there any way to recreate the input range using plain js (without using jQuery).

Expected Result

 <input type="range">

My current work

 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>

Problem

In an actual input range the thumb only moves when we are dragging it but here it moves when we are hovering over it. is there any way to move it when we are only dragging it?. Even in an example with many sliders in the same page.

Any help in rephrasing the question is highly appreciated.

Answer 1

Is this what u wanted?

 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

Here would be an example of how to do it just when the mouse is pressed and the mouse moves:

 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>