Задать вопрос
@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; - нечего не работает - почему....
  • Вопрос задан
  • 279 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend-стажер React
Студия Oxem • Москва
от 20 000 до 80 000 ₽
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Привязка к Маркетплейсам 1С Розница 2.3
20 апр. 2024, в 05:26
10000 руб./за проект
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Английская версия для сайта на WordPress
20 апр. 2024, в 03:34
8000 руб./за проект
Ещё заказы