JSFiddle - React, Tailwind, and code Playground

Slider with input

by Ttt Yyy

HTML

<div class='container' >
  <div class='sliderContainer'>
    <div class='min'>
    </div>
    <input type='range' min='0' max='100' value='50' class='slider' id='input'>
    <div class='max'>
    </div>
  </div>
 
  <p>
  Value: <span id='demo'></span>
  </p>
</div>

CSS

.container {
  width: 100%;
}

.sliderContainer {
  display: flex;
}

.min {
  margin-right: 5px;
}

.max {
  margin-left: 5px;
}

.slider {
  /* -webkit-appearance: none; */
  background: #d3d3d3;
  border-radius: 5px;
  height: 15px;
  cursor: pointer;
}

JavaScript

let slider = document.getElementsByClassName('slider')[0];
/* let slider = document.getElementById('input'); */
let output = document.getElementById('demo');
output.innerHTML = slider.value;
let min = document.getElementsByClassName('min')[0];
let max = document.getElementsByClassName('max')[0];
min.innerHTML = slider.min;
max.innerHTML = slider.max;

slider.addEventListener('input', (e) => {
	output.innerHTML = slider.value;
})