React項(xiàng)目里面對(duì)于滑塊的樣式問題
美化滑動(dòng)條的步驟：

1. 除去系統(tǒng)默認(rèn)的樣式
2. 給滑動(dòng)軌道（track）添加樣式
3. 給滑塊（thumb）添加樣式
4. 依據(jù)滑塊所在位置填充進(jìn)度條
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;
    /*//這三個(gè)是去掉滑塊原有的默認(rèn)樣式萨惑，劃重點(diǎn)Ｋ仓丸边！*/

    /*設(shè)置滑塊的陰影*/
    width: 30px;
    height: 35px;

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

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

    //edge兼容的問題會(huì)被遮住
    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;
    /*//這三個(gè)是去掉滑塊原有的默認(rèn)樣式冯丙，劃重點(diǎn)Ｇ燹唷！*/

    /*設(shè)置滑塊的陰影*/
    width: 30px;
    height: 35px;

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

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


    transform: translateX(-15px)
  }

詳情請(qǐng)參考link
其實(shí)都是根據(jù)需要做修改