javascript - 如何仅使用 javascript 设置输入[范围]的拇指样式？

Question

所以我有一个范围/ slider <input type="range">我有一些 css 使它看起来像这样:
我希望拇指在滑动时改变颜色，我得到了 JS，我可以根据它的值 1-100 获取颜色，但我不知道如何访问范围的拇指。无论我看向哪里，我都可以通过 CSS 访问拇指，但在 JS 上却无法访问。

我的尝试类似于:

slider.thumb //undefined
slider.shadowRoot //null
slider.style.webkitSliderThumb // undefined
slider.style.thumb // undefined
slider.childNodes  // []
slider.children // []

Answer 1

最好的方法是使用 CSS 变量 将颜色传递给 psuedoselector。我在下面整理了一个非常简单的示例:

const input = document.querySelector( 'input' );

input.addEventListener( 'input', event => {
   
   // This assigns the strength of the color to a CSS variable, which will in turn style the slider.
   input.style.setProperty( '--color', `rgba(${input.value},0,0,1)`);
  
})

:root {
  --color: rgba(0,0,0,1);
}
input[type=range] {
  width: 100%;
  height: 1em;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient( 90deg, black, red );
}
input[type=range]::-webkit-slider-thumb {
  background: var(--color, white);
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid white;
}

<input type="range" value="1" min="0" max="255" step="1" />

这里的优雅之处在于它也与所有旧浏览器很好地兼容，因为您可以为那些不愿意使用现代浏览器的人定义默认的白色。

不，JS 中无法访问伪元素，因为它们……技术上不存在。