input range的样式美化，chrome,ie10,firefox兼容方式

input range三浏览器的兼容

效果如图所示：

image.png

参考文章 https://juejin.im/entry/59a67890f265da2494123881
我的环境下编译时补全前缀，使用的无前缀写法 ‘appearance：none‘等使用了无前缀写法，若编译器不自带该功能，需补全前缀，如-webkit-appearance:none等等。

• jsx

• scss

  /* input range */
  .crop-range {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 160px;

    background-color: #f0f0f0;
    cursor: pointer;
    appearance: none;
    border-radius: 10px;
    outline: none;
    /* 公用滑条样式 */
    @mixin track-style {
      height: 6px;
      border-radius: 3px;
      appearance: none;  //去除自带的滑条样式
    }
    /* 公用滑块样式 */
    @mixin thumb-style {
      box-shadow: 0 .125em .125em #666666;
      width: 18px;
      height: 18px;
      background-color: #fff;
      border: 4px solid #a100ff;
      border-radius: 50%;
      box-sizing: border-box;
      appearance: none; //去除自带的滑块样式
    }
    &::-ms-track { //ie滑条
      @include track-style;
      border-color: transparent; //去除原有边框
      color: transparent; //去除轨道内的竖线
      padding: 10px 0;
      background-color: #fff;
    }
    &::-webkit-slider-runnable-track { //chrome滑条
      @include track-style;
    }
    &::moz-range-track {//firefox滑条
      @include track-style;
      outline: none;
      background-color: #fff;
    }
    &::-ms-fill-lower {//ie滑条已填充部分
      border-radius: 10px;
      background: #a100ff;
    }
    &::-ms-fill-upper {//ie滑条未填充部分
      border-radius: 10px;
      background: #f0f0f0;
    }
    &::-moz-range-progress {//firefox滑条渐变
      outline: none;
      height: 6px;
      background: linear-gradient(to right, #a100ff, #a100ff 100%, #f0f0f0);
      border-radius: 3px;
    }
    &::-ms-thumb {//ie滑块
      @include thumb-style;
      margin-top: -3px;
      border-radius: 50%;
    }
    &::-moz-range-thumb {//firefox滑块
      @include thumb-style;
      margin-top: -7px;
    }
    &::-webkit-slider-thumb {//chrome滑块
      @include thumb-style;
      margin-top: -7px;
    }
    &::-moz-focus-outer { //firefox去input range 的outline
      border: 0;
    }
  }

• jsx

componentDidMount(){
/* forefox的input的默认高度是子元素max-height（滑块的高度），input的background-color已经设置成灰色，所以在这里控制高度 */
/* 麻瓜写法 */
    if((navigator.userAgent.toLowerCase().match(/firefox\/([\d.]+)/))) {
      document.getElementsByClassName('crop-range')[0].style.height = '6px';
    }
    this.loadResource(()=>{this.init()});
  }

/* Chrome没有提供滑块前后两种颜色的css属性，需js来控制 */
if (navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/)) {
      $range.style.background = 'linear-gradient(to right, #a100ff, #a100ff ' + percent + '%, #f0f0f0 ' + percent + '%)';
    }