H5自带滑块的一些样式设置

偶然间遇到了H5自带的一个滑块的属性，直接就是在input里边的一个属性

 <input type="range" min="0" max="100" step="5" />
min和max很显然就是范围的最大值和最小值，
step这个属性可以说一下，它设置的其实就是一次滑动，能够滑动多少距离

我们在第一次用的时候，会发现样式都是默认的，不是我们想要的，这就需要我们去改变他的默认演示，添加一些自己需要的

//先来看第一个，这个设置的整个外观的样式，   -webkit-appearance:none;这个的意思就是去除默认的样式，大家直接可以复制代码试一下
input[type=range] {
      outline: none;
      -webkit-appearance:none;
      border-radius: 5px;
      height: 5px;
    } 

//这个属性就是滚动的时候拖动的那个滑块的样式更改。
input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background-color: orange;
    }