input type=range customization

http://jsfiddle.net/_Sud/cEy9n/


css


input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:10px;
    border-radius:50px;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;/*
    background-color: #666;
    opacity: 0.5;
    width: 10px;
    height: 26px;*/
    width:15px;
height:15px;
border-radius:50px;
color:#fff;
box-shadow:1px 1px 2px #000;
background:#cccbbb;
opacity:0.95;
}
input[type="range"]::-webkit-slider-thumb:hover{
color:#aaa;
opacity:1;
-webkit-transform: scale(1.2,1.2);
}

HTML

<input type="range" min="0" max="100">