Slider styling with CSS

by Kyrylo Slatin

HTML

<input type="range" class="vVertical" />
<input type="range" class="vHorizon" />

CSS

input[type=range].vVertical {
    -webkit-appearance: none;
    background: url('http://i.imgur.com/xR818lC.png')  no-repeat center;
    background-size: 100% 100%;
    width: 200px;
    height:10px;
    margin-top: 100px;
      -webkit-transform:rotate(90deg);       
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
   // z-index: 0;
}
input[type=range].vHorizon {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    background: url('http://i.imgur.com/xR818lC.png')  no-repeat center;
    background-size: 100% 100%;
    height: 10px;
    width:200px;

}

input[type="range"]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    background: url('http://i.imgur.com/xR818lC.png')  no-repeat center;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
}
input[type="range"]::-ms-slider-thumb{
    -ms-appearance: none;
    background: url('http://i.imgur.com/xR818lC.png')  no-repeat center;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;    
}
input[type="range"]::-moz-slider-thumb{
    -moz-appearance: none;
    background: url('http://i.imgur.com/xR818lC.png')  no-repeat center;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;    
}
input[type="range"]::-o-slider-thumb{
    -o-appearance: none;
    background: url('http://i.imgur.com/xR818lC.png')  no-repeat center;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;    
}