当 Html 输入范围 'step' 不是范围的 'max' 值的倍数时

Question

I have a situation where my range slider's step is not multiple of max value, so slider value goes only to 90, because next step would be greater than 100. the snippet:

 <input min=0 max=100 step=15 value=0 id='my-slider' type="range" oninput='onChange()'/> <label id='label'>0</label> <script type="text/javascript"> function onChange(){ const val = document.getElementById('my-slider').value; document.getElementById('label').innerText = val; } </script>

my problem is that I want slider to reach maximal value (in this case 100), but I also want t retain the step value (15). desired behavior is something like that: 0 -> 15 -> 30 -> 45 -> 60 -> 75 -> 90 -> 100. is there some simple way to achieve this or is it better to write custom slider with javascript?

Answer 1

Don't post the slider value directly and/or handle the value on the server

 function onChange() { let val = document.getElementById('my-slider').value; val = val >= 100 ? 100 : val; document.getElementById('label').innerText = val; document.getElementById('actualValue').value = val; console.log(document.getElementById('actualValue').value); // remove this when happy } onChange()

 <input type="hidden" id="actualValue" name="actualValue" value="" /><br/> <input min=0 max=105 step=15 value=0 id='my-slider' type="range" oninput='onChange()' /> <label id='label'>0</label>