@hannyto1111

Как использовать Linear gradient для input range?

Здравствуйте, я нашел такой вариант стилизации input range,
<!DOCTYPE html>

<body>
	<input type="range" min="0" max="100" value="0"  />
</body>
<style>
body {
  background: green;
}

input {
  appearance: none;
  height: 1vmin;
  
  --k: 0;
  --pos: calc(2vmin * 0.5 + var(--k) * (100% - 2vmin));
}

input::-webkit-slider-container {
  background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;
}

input::-webkit-slider-thumb {
  appearance: none;
  width: 2vmin;
  height: 2vmin;
  border-radius: 50%;
  background: rgba(0, 0, 255, 0.5);
}

</style>
<script>
addEventListener('input', e => {
	e.target.style.setProperty('--k', +((e.target.value - e.target.min) / (e.target.max - e.target.min)));
}, false);
</script>

</html>

Но как бы я не питался выставить одни цвет в
background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;
тоєсть сделать так background: white 0 / var(--pos) no-repeat, grey; - нечего не работает - почему....
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы