如何美化滑动条range

1、<form action="/example/html5/demo_form.asp" method="get">

Points: <input type="range" name="points" min="1" max="10" />

<input type="submit" />

</form>

没有美化的滑动条(谷歌)就是这样的，有时候用在移动端或者pc端感觉显得特别的不协调

2、其实可以把滑动条分为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; }

3、

给滑块设置样式

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

4、给滑轨设置样式

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

5、填充进度条作用两边随滑块变化长度，所以需要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)');   })     //样式随心~