拉霸 range 範例
<form>
<input type="range" min="0" max="100" step="1" value="50">
<input type="range" min="0" max="100" step="1" value="50" style="-webkit-appearance:none;background:none;">

<input type="range" min="0" max="100" step="1" value="50" style="box-shadow:5px 5px 5px #333300">

 .xx {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    opacity: 0.7;
}
.xx:hover {
    opacity: 1;
}
.xx::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #04AA6D;
    cursor: pointer;
}

<input type="range" min="0" max="100" step="1" value="50" style="box-shadow:5px 5px 5px #333300">

 .yy{
    -webkit-appearance: none;
}
.yy::-webkit-slider-runnable-track {
    cursor:grab;
    box-shadow: 3px 3px 2px 1px #993300;
    background: #AC51B5;
    border-radius: 25px 25px 0px 0px;
    border:thick;
}
.yy::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-shadow: 3px 3px 3px #00AA00;
    border: 2px solid #83E584;
    height: 30px;
    width: 20px;
    border-radius: 30px;
    background: #439643;
    margin-top: -12px;
}
</form>
  1. disabled：該 range 無法調整
  2. min：調整最小值
  3. max：調整最大值
  4. step：調整時，每次變更數字
  5. value：定位後的值
  6. 可以使用 CSS 讓 value 更具多樣變化
  7. box-shadow:參數分別為 h-offset v-offset blur-radius spread-radius color;
  8. border-radius:參數分別為 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
  9. border-radius:參數分別為 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
  10. border:參數分別為 border-width border-type border-color