javascript - 当 Html 输入范围“步”不是范围“最大值”值的倍数时
问题描述
我有一种情况,我的范围滑块的步长不是最大值的倍数,因此滑块值仅变为 90,因为下一步将大于 100。片段:
<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编写自定义滑块更好?
解决方案
不要直接发布滑块值和/或在服务器上处理值
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>
推荐阅读
- php - 按下按钮时隐藏 div
- kubernetes - Kubernetes - 如何在 .yml 文件中执行命令
- r - 将数据框从 R 导出到 .csv 时小数点符号消失
- firebase - 如何在没有 Firebase 管理员的情况下使用 Firebase Firestore 模拟器
- python - 线程函数响应延迟
- sql - SQL 为什么我收到无效标识符错误?
- r-exams - 黑板不导入 Blackboard.zip
- python - 在 VScode 中跟踪 python 警告
- typescript - 如何根据类方法返回类型声明参数类型?
- reactjs - 如何避免来自 Apollo useMutation 钩子的解构突变?