Стилизовать ползунок

Question

input[type="range"], input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;  /* Override default look */
    appearance: none;
    cursor: pointer
}
input[type="range"] {
  margin-left:-8px;
  background: #000;
  height: 5px;
  width: 200px
}

input[type="range"]::-webkit-slider-thumb {
   height: 20px;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   background: red
}

<input type="range">

Что та не пойму, как сделать прогресс у ползунка красным

Answer 1

Полазили бы в DevTools и сами потыкали, за это отвечает ::-webkit-slider-container (хотя всякие генераторы используют ::-webkit-slider-runnable-track).

input[type="range"], input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;  /* Override default look */
    appearance: none;
    cursor: pointer
}
input[type="range"] {
  margin-left:-8px;
  background: #000;
  height: 5px;
  width: 200px
}

input[type="range"]::-webkit-slider-thumb {
   height: 20px;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   background: red
}

input[type="range"]::-webkit-slider-container
{
  background-color: red;
}

<input type="range">

БЛОГ НА HUSL

Стилизовать ползунок

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