Заполнить нижний диапазон ввода чистым css? - PullRequest
Новая
       84

Заполнить нижний диапазон ввода чистым css?

0 голосов
/ 10 июля 2020

Я пытаюсь найти способ заполнить нижнюю часть ввода диапазона для отображения прогресса, не используя JS для обновления градиента.

Это мой js код: 

<input id="slider" type="range" min="1" max="100" value={_volume} className={styles.slider} onChange={(e)=> this.setState({ _volume: parseInt(e.target.value) })} />

Это мой css код: 

.slider {
  background: linear-gradient(to right, $lightGrey 0%, $lightGrey 50%, $darkGrey 50%, $darkGrey 100%);
  border: none;
  border-radius: 4px;
  height: 3px;
  width: 100%;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: $lightGrey;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
...