如何自定义输入范围滑块？

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; }