当 Html 输入范围 'step' 不是范围的 'max' 值的倍数时 [英] when Html input range 'step' is not multiple of range's 'max' value
问题描述
我有一种情况,我的范围滑块的步长不是最大值的倍数,因此滑块值仅变为 90,因为下一步将大于 100.代码片段:
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>
我的问题是我希望滑块达到最大值(在本例中为 100),但我也不想保留步长值 (15).期望的行为是这样的:0 -> 15 -> 30 -> 45 -> 60 -> 75 -> 90 -> 100.有没有一些简单的方法来实现这一点,还是用javascript编写自定义滑块更好?
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?
推荐答案
不要直接发布滑块值和/或在服务器上处理该值
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>
这篇关于当 Html 输入范围 'step' 不是范围的 'max' 值的倍数时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!