кастомизация range

Question

Как добавить фон track который идет до thumb?

#performance {
  margin-bottom: 20px;
  position: relative;
}

.range {
  -webkit-appearance: none;
  vertical-align: middle;
  outline: none;
  border: none;
  padding: 0;
  background: none;
  width: 100%;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  background: red !important;
  height: 13px;
  border-radius: 3px;
  border: none transparent;
}

.range::-moz-range-track {
  background-color: #E5E5E5;
  height: 13px;
  border-radius: 3px;
  border: none;
}

.range::-ms-track {
  color: transparent;
  border: none;
  background: none;
  height: 13px;
}

.range::-ms-fill-lower {
  background-color: red;
  border-radius: 3px;
}

.range::-ms-fill-upper {
  background-color: red;
  border-radius: 3px;
}

.range::-ms-tooltip {
  display: none;
  /* display and visibility only */
}

.range::-moz-range-thumb {
  border-radius: 20px;
  height: 31px;
  width: 31px;
  border: none;
  background: none;
  background-color: #fff;
}

.range:active::-moz-range-thumb {
  outline: none;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  border-radius: 100%;
  background-color: #fff;
  border: 9px solid red;
  height: 31px;
  width: 31px;
  margin-top: -10px;
}

.range[disabled]::-webkit-slider-thumb {
  background-color: transparent;
  border: 1px solid red !important;
}

.range:active::-webkit-slider-thumb {
  outline: none;
}

.range::-ms-thumb {
  border-radius: 100%;
  background-color: #606670;
  height: 20px;
  width: 20px;
  border: none;
}

.range:active::-ms-thumb {
  border: none;
}

<input class="range" type="range" value="1" id="performance" min="1" max="6" step="1">

Answer 1

Мне удалось найти решение на js.

for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
  e.style.setProperty('--value', e.value);
  e.style.setProperty('--min', e.min == '' ? '0' : e.min);
  e.style.setProperty('--max', e.max == '' ? '100' : e.max);
  e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}

* {
  padding: 0;
  margin: 0;
}

.container {
  padding: 50px;
  margin: 0 auto;
}

.wrapper {
  max-width: 1132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

input[type=range].styled-slider {
  height: 32px;
  -webkit-appearance: none;
}


/*progress support*/

input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 30px + var(--ratio) * (100% - 30px));
}

input[type=range].styled-slider:focus {
  outline: none;
}


/*webkit*/

input[type=range].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #fff;
  border: 9px solid #FF2200;
  box-shadow: none;
  margin-top: calc(1em * 0.5 - 30px * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 1em;
  border: none;
  border-radius: 3px;
  background: #E5E5E5;
  box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#FF2200, #FF2200) 0/var(--sx) 100% no-repeat, #E5E5E5;
}


/*mozilla*/

input[type=range].styled-slider::-moz-range-thumb {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #FF2200;
  border: none;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-track {
  height: 1em;
  border: none;
  border-radius: 0;
  background: #E5E5E5;
  box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#FF2200, #FF2200) 0/var(--sx) 100% no-repeat, #000000;
}


/*ms*/

input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #FF2200;
  border: none;
  box-shadow: none;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 1em;
  border-radius: 0;
  background: #E5E5E5;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: 1em;
  border-radius: 0px 0 0 0px;
  margin: -undefined 0 -undefined -undefined;
  background: #FF2200;
  border: none;
  border-right-width: 0;
}

<div class="container">
  <div class="wrapper">
    <input class="range styled-slider slider-progress" type="range" value="1" id="performance" min="1" max="6" step="1" style="width:100%;">
  </div>
</div>

БЛОГ НА HUSL

кастомизация range

Ответы (1 шт):