Как настроить слайдер диапазона ввода?

Question

Я заметил, что слайдер диапазона на Iconic отлично смотрится.

Еще лучше на IOS. Как они это делают?

Я неуклюже скопировал и наклеил то, что увидел через инспектор инструментов Chrome dev, до 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; }