digamos que tengo un control deslizante de rango que va del valor 1 al 100 de forma predeterminada, podría deslizarlo del 1 al 100.
Me gustaría que el control deslizante se bloquee al alcanzar un valor especificado en otro elemento. Lo he estado intentando así (donde 20 sería el valor en el elemento, más fácil para el ejemplo), pero eso no es perfecto. De hecho, el pulgar se detiene, pero creo que internamente si sigue deslizando, recordará ese valor, incluso si no lo ve.
EDITAR: ¿sería algo bueno un bucle for aquí?
for(i=slider.value;i<20;i++) ... if (slider.value >=20) slider.value=20¿Alguien mejor en esto que pueda ayudar?
Envuelva todo en un <form> si aún no lo ha hecho, asumiendo que su límite está establecido por otro <input> , asigne un controlador de eventos al <form> para que se active cada vez que haya un evento de "entrada". Haga que el controlador de eventos cambie el valor del atributo [max] de la entrada de range al [value] del límite <input> .
const limit = e => { const io = e.currentTarget.elements; let max = io.limit.value; io.range.max = max; io.view.value = io.range.value; }; const ui = document.forms.ui; ui.oninput = limit; input { display: inline-block; width: 5ch; text-align: right; } #range { width: 20ch } <form id='ui'> <input id='limit' type='number' max='100' value='100'> <output id='view'>0</output><br> <input id='range' type='range' min='0' max='100' value='0'> </form>