<h1>Style input[type='range']</h1>

<div class="page">
  <h3>默认样式</h3>
  <div class="item">
    <input type="range" max="10" min="0" />
  </div>
  <h3>取消默认样式</h3>
  <div class="item">
    <input class="no-default-style" type="range" max="10" min="0" />
  </div>
  <h3>设置进度条颜色</h3>
  <div class="item">
    <input class="no-default-style color" type="range" max="10" step="0.1" min="0" value="8"/>
  </div>
  <h3>设置控制按钮颜色</h3>
  <div class="item">
    <input class="no-default-style color bar" type="range" max="10" step="0.1" min="0" value="8"/>
  </div>
  <h3>旋转控制条</h3>
  <div class="item" style="height:300px">
    <input class="no-default-style color bar rotate" type="range" max="10" step="0.1" min="0" value="8"/>
  </div>
  
  <h3>高亮</h3>
  <div class="item" style="height:300px">
    <input class="no-default-style color bar gradient" type="range" max="10" step="0.1" min="0" value="8"/>
  </div>
  
  
</div>

body{
  text-align:center;
}
.page{
  width: 720px;
  margin: 100px auto;
}

.item{
   height: 40px;
   margin: 10px;
}
input{
  width:100%;
  height: 8px;
}
.no-default-style{
   -webkit-appearance: none;
}
.color{
    
    background: none;
}
.color::-webkit-slider-runnable-track{
    background: #eee;
    height:5px;
    border-radius: 4px;
}
.color::-moz-range-track{
    background-color: #eee;
    border-radius: 4px;
}
.color::-ms-track{
    background-color: #eee;
    color: transparent;
    border: none;
}
.color::-ms-fill-lower{
    background-color: #1ba1e2;
}

.bar::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 3px solid #1ba1e2;
        height: 15px;
        width: 15px;
        margin-top: -3px;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }
    .bar::-moz-range-thumb {
        border: 3px solid #1ba1e2;
        height: 7px;
        width: 7px;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }
.bar::-ms-thumb {
        border: 3px solid #1ba1e2;
        height: 7px;
        width: 7px;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }
.rotate{
  width: 250px;
  height: 5px;
  margin: 0;
  transform-origin: 125px 125px;
  transform: rotate(-90deg);  
}

.gradient::-webkit-slider-runnable-track{
    background:linear-gradient(to right, #1ab1e2 0%, #1ab1e2 80%,#eee 80%, #eee); 
}
.gradient::-moz-range-track{
    background:linear-gradient(to right, #1ab1e2 0%, #1ab1e2 80%,#eee 80%, #eee); 
}
.gradient::-ms-fill-lower{
    background:linear-gradient(to right, #1ab1e2 0%, #1ab1e2 80%,#eee 80%, #eee); 
}