¿Hay alguna forma de recrear el rango de entrada usando js simple (sin usar jQuery)?
<input type="range"> 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>En un rango de entrada real, el pulgar solo se mueve cuando lo arrastramos, pero aquí se mueve cuando lo pasamos por encima. hay alguna forma de moverlo cuando solo lo estamos arrastrando?. Incluso en un ejemplo con muchos controles deslizantes en la misma página.
Cualquier ayuda para reformular la pregunta es muy apreciada.
¿Es esto lo que querías?
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>Aquí sería un ejemplo de cómo hacerlo justo cuando se presiona el mouse y el mouse se mueve:
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>