How to create a input range using plain 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.

Why are you doing this? All modern browsers support <input type="range"> already, so there's no need to recreate it in JavaScript. Heck, even Internet Explorer 10 supports it... — Dai
– Dai, Commented Mar 2, 2022 at 8:48
If you're wanting to learn how to properly handle touch* and mousemove events, there are much better exercises than a range input, imo. Have you considered starting off with something simpler, such as a <canvas> painting demo? — Dai
– Dai, Commented Mar 2, 2022 at 8:53
@Dai Thanks for your recommendation. 'll look in to that. :) — Deera Wijesundara
– Deera Wijesundara, Commented Mar 2, 2022 at 8:57
@Dai I agree that slider is supported nowadays, but it's not that straigthforward to style, or to have different types of reaction to mouse moving or touch, so it's not such a bad exercise. — A Haworth
– A Haworth, Commented Mar 2, 2022 at 9:27

Abhishek Kokate · Accepted Answer · 2022-03-02 09:33:08Z

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>

edited Mar 2, 2022 at 9:33

answered Mar 2, 2022 at 9:19

Abhishek Kokate

4705 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A Haworth Over a year ago

This seems to work OK, but some explanation of what you have done/changed would make your answer more valuable. Can you add some?

Apollo79 · Accepted Answer · 2022-03-02 10:17:25Z

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>

Collectives™ on Stack Overflow

How to create a input range using plain javascript

Expected Result

My current work

Problem

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Expected Result

My current work

Problem

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related