滑块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
datalist{
display: flex;
justify-content: space-between;
}
input[type="range"]{
appearance: slider-vertical; 竖着显示
}
</style>
</head>
<body>
<input type="range" min="0" max="10" value="0" step="2" list="values" id="a" />
<datalist id="values">
<option value="0" label="0分"></option>
<option value="2" label="2分"></option>
<option value="4" label="4分"></optgroup>
<option value="6" label="6分"></optgroup>
<option value="8" label="8分"></option>
<option value="10" label="10分"></option>
</datalist>
<script>
获取滑块的值
const a = document.getElementById("a");
a.addEventListener("change",(e)=>{
松开鼠标才运行
console.log(e.target.valueAsNumber);
})
a.addEventListener("input",(e)=>{
变化的时候就运行
console.log(e.target.valueAsNumber);
})
</script>
</body>
</html>