Input type="range"的滑动条

网上查了很多关于滑动条的资料,大部分是讲述画一个没有刻度的滑动条。特地在国外技术论坛找到的添加刻度方法,具体使用方法如下:

1. 为input添加list="tickmarks"的属性

2. 增加datalist包option的节点,若要显示刻度,给option增加label属性

3. 通过js方法获取input表单的value值赋予指定节点

不同浏览器实现效果会有差异,可通过修改默认属性统一滑动条样式。虽然实现过程比较简单,但由于该技术使用频率较低,相关资料较少,特以此篇博客献给广大技术朋友,具体代码如下(chrome效果图):

Input type=




Document




 

   
   

 
 

 

      响度评估:
 



 

 
   

 
 

   

        日常影响评估:
   

 


你可能感兴趣的:(H5)