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)'); }) //样式随心~
