如何把滑动条变好看一点

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

默认样式

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

<input type="range">

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

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

如何美化

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

1. 去除默认样式
   每个元素都是有自己默认样式的，有些样式不清除的话自定义的样式就不会生效。

      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;
      }

2. 给滑块设置样式

      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;    
      }
      

   

3. 给滑轨设置样式

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

   

4. 填充进度条
   作用两边随滑块变化长度，所以需要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，看来还有很多东西有待探索啊~