Stylizowanie elementów typu wejściowego zakresu w przeglądarkach Webkit

Question

Czy istnieje sposób na stylizowanie elementów <input type="range"> dla przeglądarek Webkit?

Answer 1

Słyszałem tylko o typie range, a nie slider.

input[type="range"] { 
    -webkit-appearance: slider-horizontal; 
} 

Answer 2

Jest całkiem dobry artykuł na styling a range to make it look like an iPhone slider napisany przez Davida B. Calhoun.

Myślę, że post na blogu powinien dotyczyć większości aspektów stylizacji typu wejściowego zakresu.

Oto niektóre z CSS:

input[type='range']::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 68px; 
    height: 44px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0, #fefefe), 
     color-stop(0.49, #dddddd), 
     color-stop(0.51, #d1d1d1), 
     color-stop(1, #a1a1a1) 
    ); 
    background-repeat: no-repeat; 
    background-position: 50%; 
}