网上查了很多关于滑动条的资料,大部分是讲述画一个没有刻度的滑动条。特地在国外技术论坛找到的添加刻度方法,具体使用方法如下:
1. 为input添加list="tickmarks"的属性
2. 增加datalist包option的节点,若要显示刻度,给option增加label属性
3. 通过js方法获取input表单的value值赋予指定节点
不同浏览器实现效果会有差异,可通过修改默认属性统一滑动条样式。虽然实现过程比较简单,但由于该技术使用频率较低,相关资料较少,特以此篇博客献给广大技术朋友,具体代码如下(chrome效果图):
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input[type=range] {
width: 500px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
#tickmarks{
width: 515px;
display: flex;
position: relative;
left: -6px;
}
#tickmarks option{
width: 25px;
display: inline-block;
font-size: 10px;
text-align: center;
}
.volume,.daily{
display: inline-block;
position: relative;
top: -12px;
margin-left: 20px;
}
.wrapper{
display: inline-block;
background: #FFFFE0;
border: 1px solid #ccc;
margin: 10px;
}
</style>
</head>
<body>
<div class="swiperBar">
<div class="wrapper">
<datalist id="tickmarks">
<option value="0" label="0">
<option value="10">
<option value="20" label="1">
<option value="30">
<option value="40" label="2">
<option value="50">
<option value="60" label="3">
<option value="70">
<option value="80" label="4">
<option value="90">
<option value="100" label="5">
<option value="110">
<option value="120" label="6">
<option value="130">
<option value="140" label="7">
<option value="150">
<option value="160" label="8">
<option value="170">
<option value="180" label="9">
<option value="190">
<option value="200" label="10">
</datalist>
<input type="range" step="5" list="tickmarks" οnchange="showVal(this.value,'volumeBox')">
</div>
<div class="volume" style="display: inline-block">
响度评估:<span id="volumeBox" ></span>
</div>
</div>
<div class="swiperBar">
<div class="wrapper">
<datalist id="tickmarks">
<option value="0" label="0">
<option value="10">
<option value="20" label="1">
<option value="30">
<option value="40" label="2">
<option value="50">
<option value="60" label="3">
<option value="70">
<option value="80" label="4">
<option value="90">
<option value="100" label="5">
<option value="110">
<option value="120" label="6">
<option value="130">
<option value="140" label="7">
<option value="150">
<option value="160" label="8">
<option value="170">
<option value="180" label="9">
<option value="190">
<option value="200" label="10">
</datalist>
<input type="range" step="5" list="tickmarks" οnchange="showVal(this.value,'dailyBox')">
</div>
<div class="daily" style="display: inline-block">
日常影响评估:<span id="dailyBox" ></span>
</div>
</div>
</body>
<script>
function showVal(newVal,id){
document.getElementById(id).innerHTML=newVal*0.1;
}
</script>
</html>