写在前面:
本文的主要内容包括:type="range"属性介绍,修改range默认css样式以及在js中的实际应用。本文面向前端小白,写的不好之处,请多多见谅。文末有demo链接,可以自行复制到本地进行试验。
相关:自定义 range radio select的样式滑轮,按钮,选择框
最终要实现的效果:
步骤:
1.range属性相关介绍
2.搭建html结构;
3.css样式修改,包括给滑动轨道添加样式、给滑块添加样式;
4.添加相关js代码实现应用效果;
5.关于浏览器兼容。
在html里面输入如下内容,即可使用:
<input type="range">//这是最粗糙的使用方式复制代码
range在各个浏览器中的默认样式:
range属性相关:
range 输入类型用于应该包含指定范围值的输入字段。
range 类型显示为滑块。
您也可以设置可接受数字的范围限制:
<input type="range" name="points" min="1" max="10" />//max为最大的值,min为最小的值复制代码
html5 range 类型的限定:
HTML DOM Input Range 对象(js获取dom)
搭建html结构:
<div class="js-2-1section3">
<div class="js-2-1section3-div1">
<span class="js-2-1section3-div1-span1">玩家人数</span>
<input type="text" class="player-num" id="player" value="6" max="18" min=