input type='range'样式兼容问题

React项目里面对于滑块的样式问题
美化滑动条的步骤：

1. 除去系统默认的样式
2. 给滑动轨道（track）添加样式
3. 给滑块（thumb）添加样式
4. 依据滑块所在位置填充进度条
5. 浏览器兼容

let _className = isEdge ? 'edgeRangeWarp' : 'rangeWarp'
<div className={_className}>
  <input type='range' class='slider' min=0 max=100 step=10 />
</div>

.edgeRangeWarp{
  padding: 0;
  margin-top: 15px;
  .slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 35px;
    /* Specified height */
    background-size: contain;
    outline: none;


    /* Remove outline */
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
    opacity: 1;

    /* Fully shown on mouse-over */
  }
  .slider::-ms-thumb {

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*//这三个是去掉滑块原有的默认样式，划重点！！*/

    /*设置滑块的阴影*/
    width: 30px;
    height: 35px;

    background: url("../../../../../../../assets/images/project/flag.png");

    background-repeat: no-repeat;
    cursor: move;

    //edge兼容的问题会被遮住
    transform: translateX(0)
  }
}
.rangeWarp {
  padding: 0 0 0 20px;
  margin-top: 15px;

  /* The slider itself */
  .slider {
    -webkit-appearance: none;
    /* Override default CSS styles */
    appearance: none;
    width: 100%;
    /* Full-width */
    height: 35px;
    /* Specified height */
    background-size: contain;
    outline: none;


    /* Remove outline */
    /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s;
    /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
    opacity: 1;

    /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    width: 30px;
    height: 35px;
    background: url("../../../../../../../assets/images/project/flag.png");

    background-repeat: no-repeat;
    cursor: move;

    transform: translateX(-15px)
  }

  .slider::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*//这三个是去掉滑块原有的默认样式，划重点！！*/

    /*设置滑块的阴影*/
    width: 30px;
    height: 35px;

    background: url("../../../../../../../assets/images/project/flag.png");

    background-repeat: no-repeat;
    cursor: move;


    transform: translateX(-15px)
  }

详情请参考link
其实都是根据需要做修改