CSS修改input[type=range]滑塊樣式

input[type="range"]是html5中的input標簽新屬性，樣子如下：

< input  type ="range"  value ="40"   />

如果想讓此滑塊效果如下圖所示，怎么做呢？

以下是樣式部分：

 

 
          <style type="text/css">
            input[type="range"] { 
          
                -webkit-box-shadow: 
           0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset; 
          
                margin-top: 
           2px; 
          
                background-color: 
           #272728; 
          
                border-radius: 
           15px; 
          
                width: 
           400px; 
          
                -webkit-appearance: 
           none; 
          
                height: 
          10px; 
          
            } 
          
            input[type="range"]::-webkit-slider-thumb { 
          
                -webkit-appearance: 
           none; 
          
                cursor: 
           default; 
          
                top: 
           -5px; 
          
                height: 
           30px; 
          
                width: 
           20px; 
          
                transform: 
           translateY(-4px); 
          
                background: 
           none repeat scroll 0 0 #777; 
          
                border-radius: 
           15px; 
          
                -webkit-box-shadow: 
           0 -1px 1px black inset; 
          
            } 
          
        </style>