How to use Linear gradient for input range?

H

hannyto11112021-06-26 19:11:15

Layout

hannyto1111, 2021-06-26 19:11:15

Hello, I found this input range styling option,

<!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>

But no matter how I ate to put one color in

background: linear-gradient(white, white) 0 / var(--pos) no-repeat, grey;

that is, to do so background: white 0 / var(--pos) no-repeat, grey;- nothing works - why ....