H5滑条(input type=range)

input[type=range] {
-webkit-appearance: none;
width: 230px;
border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
display: block;
margin: 0 auto;
margin-top: 20px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px; /*将轨道设为圆角的*/
/*box-shadow: 0 1px 1px yellow, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
background: #6A8EF5;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 32px;
width: 32px;
margin-top: -8px; /*使滑块超出轨道部分的偏移量相等*/;
background-color: yellow;
background: url(../image/jb.png);
background-size: 100% 100%;
border-radius: 50%; /*外观设置为圆形*/
border: solid 0.125em yellow; /*设置边框*/
/* box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}