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

Question

所以我有一个范围/滑块<input type="range">，我有一些 css 使它看起来像这样： 我希望拇指在滑动时改变颜色，我得到了 JS，我可以根据它的值 1-100 获取颜色，但是我不知道如何访问该范围的拇指。无论我在哪里看，我都可以通过 CSS 访问拇指，但在 JS 上却无法访问。我的尝试类似于：slider.thumb //undefinedslider.shadowRoot //nullslider.style.webkitSliderThumb // undefinedslider.style.thumb // undefinedslider.childNodes  // []slider.children // []

Answer 1

最好的方法是使用CSS Variables将颜色传递给伪选择器。我在下面整理了一个非常简单的例子：

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 中无法访问伪元素，因为它们……技术上不存在。