原生實現滑動條效果

實現效果類似如上：

html:

<input type="range" min="0" max="1" value="0.1" step="0.01" id="range">
<span class="val" style="width: 20px;height: 20px;display: block;margin: 20px;"></span>

css:

input[type='range'] {
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px;
    margin: 20px;
}
input[type='range']:focus {
    outline: none;
}

/* chrome */
input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
}
input[type='range']::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    margin-top: -5px;
    background: #ffffff;
    border-radius: 50%;
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    box-shadow: 0 0.125em 0.125em #3b4547;
}

/* ----firefox---- */
input[type='range']::-moz-range-track {
    height: 10px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
}
input[type='range']::-moz-range-thumb {
    height: 20px;
    width: 20px;
    margin-top: -5px;
    background: #ffffff;
    border-radius: 50%;
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    box-shadow: 0 0.125em 0.125em #3b4547;
}
input[type='range']::-moz-range-progress {
    background: #aeaeae;
    height: 10px;
    border-radius: 10px 0 0 10px / 10px 0 0 10px;
}
/* 當然IE的自定義樣式僞類也有，但是我不需要用IE就不寫了：-ms-track,-ms-thumb,-ms-fill-lower,-ms-fill-upper */

moz比webkit多一個progress的樣式，所以Firefox的樣式就可以變成下面的樣子：

js用於監聽range值的改變，可以有兩種方法:

var flag = false;
var range = document.getElementById("range");
document.getElementsByClassName("val")[0].innerText = range.value;
// 通過監聽鼠標事件達到實時監聽的效果
// range.onmousedown = function () {
//     flag = true;
// }
// range.onmousemove = function () {
//     if (flag) {
//         document.getElementsByClassName("val")[0].innerText = this.value;
//     }
// }
// range.onmouseup = function () {
//     flag = false;
// }

// 通過監聽change事件，在每次發生change之後獲取值
// range.onchange = function(e) {
//     document.getElementsByClassName("val")[0].innerText = e.target.value;
// }