Question

0

178

Views

How to create a input range using plain javascript

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.

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-03T18:23:13.838Z

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>

0

178