Стилизация Range Slider не работает на краю

Question

Мой стиль CSS для ползунка диапазона не работает на Edge.Как я могу решить проблему?

Я искал в Интернете решение.И добавил некоторые коды, но все еще не работает.

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background: #33A2D9;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #33A2D9;
  cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #33A2D9 !important;
    cursor: pointer  !important;;
}
input[type=range]::-ms-fill-upper {
    border-radius: 5px !important;
    background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
    border-radius: 5px !important;
    background: #d3d3d3 !important;
}

Как это должно выглядеть (например, в Firefox):

Как это выглядит на краю:

Answer 1

Ваша "ошибка" (если мы можем так это назвать) давала вводу background.Вы хотите присвоить ему background-color из transparent и придать -track желаемый оттенок.

Также, в качестве второстепенного примечания и общего правила, избегайте использования background вместо background-color.Он короче, но он задает кучу других background- свойств, которые обычно вас не интересуют, но являются источником общих ошибок.

Поскольку он имеет тенденцию быть повторяющимся, я написал его в SCSS:

$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
@mixin slider-thumb {
  width: $input-height;
  height: $input-height;
  border-radius: $input-height/2;
  background-color: $thumb-bg;
  appearance: none;
}

@mixin slider-track {
  height: $track-height;
  border-radius: $track-height/2;
  background-color: $track-bg;
  appearance: none;
}

.slider[type=range] {
  -webkit-transition: .2s;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: $input-height;
  background-color: transparent;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  cursor: pointer;
  &:hover, &:focus, &:active {
    opacity: 1;
  }
  &::-webkit-slider- {
    &runnable-track {
      -webkit-appearance: none;
      @include slider-track;
    }
    &thumb {
      -webkit-appearance: none;
      @include slider-thumb;
      margin-top: -($input-height - $track-height)/2;
    }
  }
  &::-moz-range- {
    &track {
      @include slider-track;
    }
    &thumb {
      @include slider-thumb;
      margin-top: 0;
    }
  }
  &::-ms- {
    &track {
      @include slider-track;
    }
    &fill-upper {
      @include slider-track;
    }
    &fill-lower {
      @include slider-track;
    }
    &thumb {
      @include slider-thumb;
      margin-top: 0;
    }
  }
}

Получается следующий CSS:

.slider[type=range] {
  -webkit-appearance: none;
  -webkit-transition: .2s;
  width: 100%;
  height: 16px;
  border-radius: 3px;
  background-color: transparent;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  cursor: pointer;
}

.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {
  opacity: 1;
}

.slider[type=range]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background-color: #d3d3d3;
}

.slider[type=range]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #33A2D9;
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
}

.slider[type=range]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background-color: #d3d3d3;
}

.slider[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #33A2D9;
  margin-top: 0;
}

.slider[type=range]::-ms-track {
  height: 6px;
  border-radius: 3px;
  background-color: #d3d3d3;
}

.slider[type=range]::-ms-fill-upper {
  height: 6px;
  border-radius: 3px;
  background-color: #d3d3d3;
}

.slider[type=range]::-ms-fill-lower {
  height: 6px;
  border-radius: 3px;
  background-color: #d3d3d3;
}

.slider[type=range]::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #33A2D9;
  margin-top: 0;
}

<input type=range class=slider>

Детская площадка здесь .