Здравствуйте, я нашел такой вариант стилизации 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; - нечего не работает - почему....
Простой
Простой
