JSFiddle - React, Tailwind, and code Playground

Slider Customized using JS/HTML/CSS

by Ttt Yyy

HTML

<div id='container'>

<div id='min'>
0
</div>
<div id='slider'>
  <div id='pointer'>
  </div>
</div>
<div id='max'>
100
</div>
</div>
<div id="currentValue"></div>
<div id="console"></div>
<div id="console2"></div>
<div id="console3"></div>
<div id="console4"></div>

CSS

#container {
  display: flex;
}

#slider {
  display: flex;
  justify-content: center;
  background-color: yellow;
  height: 20px;
  position: relative;
  width: 200px;
}

#pointer {
  background-color: red;
  height: 20px;
  width: 20px;
/* transform: translateX(0); */
  position: absolute;
  left: 90px;
}

JavaScript

// reference: 
// https://codepen.io/kosarh79/pen/wqXGdE
const pointer = document.getElementById('pointer');
const currentValue = document.getElementById('currentValue');
const console = document.getElementById('console');
const console2 = document.getElementById('console2');
const slider = document.getElementById('slider');

let offset = 0;
let isDown = false;
pointer.addEventListener('mousedown', e => {
  isDown = true;
  offset = pointer.offsetLeft - e.clientX
}, true)

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', e => {
	e.preventDefault();
  if(isDown) {
  	let left = e.clientX + offset;
    if(left >= 180) {
    	left = 180
    }
    if(left <= 0) {
    	left = 0;
    }
  	pointer.style.left = `${left}px`
    
    currentValue.innerHTML = `currentValue: ${Math.floor(left/2)}`
    console.innerHTML = `e.clientX + offset(position:left): ${e.clientX + offset}`
    console2.innerHTML = `e.clientX: ${e.clientX}, offsetLeft: ${pointer.offsetLeft}`
    console3.innerHTML = `offset: ${offset}`
  }
  
})