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; /*添加底部陰影*/
}