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>