How to create a input range using plain javascript-CodePudding

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)" onm ouseover="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.

CodePudding user response：

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)" onm ousemove="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>

CodePudding user response：

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 >
  <div></div>
</div>