如何自定義輸入範圍滑塊？

Question

我注意到標誌性外觀上的範圍滑塊很棒。

在IOS上更好。他們是如何做到的呢？

我笨拙地複製和粘貼我通過Chrome開發工具檢查器看到的http://m.dabase.com/r/，但它不起作用。我錯過了什麼？

Answer 1

請檢查答案。它爲我工作很好。希望它對你有幫助。

HTML：

<div class="form-range-control"><input type="range" max="100" min="10" value="100" step="1"></div> 

CSS：

.form-range-control { 
    margin: 0 auto; 
    background-color: #afe0fc; 
    padding: 1.5em; 
    border-radius: 5px; 
} 
.form-range-control input[type="range"] { 
    -webkit-appearance: none; 
    background-color: white; 
    height: 3px; 
    border-radius: 1px;width:100%; 
} 
.form-range-control input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 20px; 
    height: 20px; 
    background: #078dd8; 
    border-radius: 50%; 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
} 

Demo

Answer 2

這裏是plunker

http://plnkr.co/edit/TUx6xNA1dv3OJowBEDQj?p=preview

CSS：

.tour-sidebar { 
-webkit-font-smoothing: antialiased; 
box-sizing: border-box; 
color: rgb(51, 51, 51); 
display: block; 
font-family: 'Gotham SSm A', 'Gotham SSm B', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 13px; 
height: 77px; 
line-height: 18.571409225463867px; 
margin-top: 54.599998474121094px; 
width: 222.5px; 

} 





.form-range-control { 
    width: 100%; 
    margin: 0 auto; 
    background-color: #afe0fc; 
    padding: 1.5em; 
    border-radius: 5px; } 
    .form-range-control input[type="range"] { 
    -webkit-appearance: none; 
    background-color: white; 
    height: 3px; 
    border-radius: 1px; } 
    .form-range-control input[type="range"]:focus { 
     outline: none; } 
    .form-range-control input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 20px; 
    height: 20px; 
    background: #078dd8; 
    border-radius: 50%; 
    cursor: -moz-grab; 
    cursor: -webkit-grab; } 
    .form-range-control input[type="range"]::-webkit-slider-thumb:active, .form-range-control input[type="range"]::-webkit-slider-thumb:focus { 
     background: #056da7; 
     cursor: -moz-grabbing; 
     cursor: -webkit-grabbing; }