input range标签美化

取消默认样式：

  input[type=range] {
      -webkit-appearance: none;
  }

聚焦边框取消：

  input[type=range]:focus {
      outline: none;
  }

滑道设置：
Chrome、Firefoxi或者IE浏览器通过不同伪类来设置

  /*chrome、safari浏览器*/
  input[type='range']::-webkit-slider-runnable-track{
      background-color: #eee;
  }
  /*firefox浏览器*/
  input[type='range']::-moz-range-track{
      background-color: #eee;
  }
  /*IE浏览器*/
  input[type="range"]::-ms-track{       
    color:transparent;/*去除轨道内竖线*/
    border-color: transparent;/*去除原有边框*/
    background-color: #eee;
  }

滑块设置：

  /*chrome，safar等浏览器设置*/
  input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      border: 3px solid #fff;
      height: 7px;
      width: 7px;
      border-radius: 8px;
      background: red;
      cursor: pointer;
  }
  /*firefox 浏览器设置*/
  input[type='range']::-moz-range-thumb {
      border: 3px solid #fff;
      height: 7px;
      width: 7px;
      border-radius: 8px;
      background: red;
      cursor: pointer;
  }
  /*IE浏览器设置*/
  input[type='range']::-ms-thumb {
      border: 3px solid #fff;
      height: 7px;
      width: 7px;
      border-radius: 8px;
      background: red;
      cursor: pointer;
  }

滑道填充部分和未填充部分设置：
基于webkit内核需要配合JS实现。

  /*firefox浏览器已填充部分*/
  input[type=range]::-moz-range-progress {
      background: linear-gradient(to right, red, white 100%, white);
      height: 20px;    
      border-radius: 10px;
  }
  /*IE浏览器*/
  /*滑道未填充的部分*/
  input[type=range]::-ms-fill-upper {
    height: 20px;
    border-radius: 10px;
    background: #ffffff;
  }
  /*滑道已填充的部分*/
  input[type=range]::-ms-fill-lower {
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(to right, red, white 100%, white);
  }