Range slider - avoid moving forward when reaching a value specified in another element-CodePudding

lets say i have a range slider going from value 1 to 100 by default i would be able to slide it going from 1 to 100.

I would like the slider to block, when reaching a value specified in another element. I've been trying it like this (where 20 would be the value in the element, just easier for the example), but that isn't perfect. the Thumb does indeed stop, but i think internally if you keep sliding, it will remember that value, even if you don't see it.

EDIT: would a for loop be something good here?

for(i=slider.value;i<20;i  )
...

if (slider.value >=20)
slider.value=20

Anyone better at this who can help?

CodePudding user response：

Wrap everything in a <form> if you haven't already then assuming your limit is set by another <input>, assign an event handler to the <form> so it will trigger whenever there's an "input" event. Have the event handler change the [max] attribute value of the range input to the [value] of the limit <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>