range滑块自定义样式，步骤详解以及实际应用

写在前面：

本文的主要内容包括：type="range"属性介绍，修改range默认css样式以及在js中的实际应用。本文面向前端小白，写的不好之处，请多多见谅。文末有demo链接，可以自行复制到本地进行试验。

相关：自定义 range radio select的样式滑轮，按钮，选择框

最终要实现的效果：

其中包括一部分js代码

步骤：

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 类型的限定：

html5关于range的属性

HTML DOM Input Range 对象（js获取dom）

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=