一直知道html5 input有个新类型range，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。最近在网上瞅了瞅，发现滑动条还是可以美化的，所以掏出来给大家摆摆~~

默认样式

首先写出一个滑动条，用法就像写一个输入框一样简单：

<input type="range">

没有美化的滑动条(谷歌)就是这样的：
默认样式

相信应该没人会选择直接用这个样式吧。

如何美化

其实可以把滑动条分为3块：滑块，滑轨，进度条。然后针对不同的块调整样式。大致步骤如下：

去除默认样式
每个元素都是有自己默认样式的，有些样式不清除的话自定义的样式就不会生效。
```
   input[type=range]{
       -webkit-appearance: none;
       width: 300px;
       border-radius: 10px;
   }
```
此处要说说这个 -webkit-appearance是个啥，该属性专门用于改变按钮和其他控件的外观。像button,input之类的有自己外观的就是默认有这个属性，当然span之类的是没有的。但是我们可以自己设置，比如span标签，默认下就是个文本，想要什么样式需要自己添加，这时如果你想给span一个按钮的样式，
```
   span{
       -webkit-appearance:button;
   }
```
它能快速地把一些按钮的特效设置上去：

当然，这没有什么用处，非要把驴唇接到马嘴上是很奇怪的~
还有滑块的默认样式：
```
   input[type=range]::-webkit-slider-thumb{   /*设置滑块*/
       -webkit-appearance:button;
   }
```
轮廓线也要去掉：
```
   input[type=range]:focus{
       outline:none;
   }
```

给滑块设置样式

   input[type=range]::webkit-slider-thumb{
       -webkit-appearance: none;     //以下样式随个人喜好
       width: 25px;   
       height: 25px;
       margin-top: -5px;     //让滑轨在滑块中间
       cursor: pointer;
       border-radius: 50%;
       background: #DEF3F8;
       box-shadow: 0 0 10px #63A35C inset;    
   }

给滑轨设置样式

   input[type=range]::-webkit-slider-runnable-track{   /*滑动条样式*/
       height: 15px;
       border-radius: 10px;
       border: 1px solid currentcolor;
   }

填充进度条
作用两边随滑块变化长度，所以需要JS：

   $('input[type=range]').css('background','linear-gradient(to right, #63A35C 0%, #ccc 50%, antiquewhite)');
   $('input[type=range]').mousemove(function(){
       $(this).css('background','linear-gradient(to right, #63A35C 0%, #ccc ' + this.value + '%, antiquewhite)');
   })     //样式随心~

然后样式就是这样的：

至于第五步就是兼容其它浏览器啦，在下这里就不介绍了，有兴趣的喷油可以看我学习的地址：

https://blog.csdn.net/u013347...

写后感

关于-webkit-appearance，::-webkit-slider-thumb，::-webkit-slider-runnable-track这些如果不是网上看到可能一直都不会知道有这么个属性可以设置o(╯□╰)o，看来还有很多东西有待探索啊~

如何把滑动条变好看一点

默认样式

如何美化

写后感

猜你喜欢