Как мне стилизовать большой палец ввода [range], используя ТОЛЬКО javascript?

Question

Итак, у меня есть диапазон / ползунок <input type="range"> И у меня есть css, чтобы он выглядел следующим образом:
Мне бы хотелось thumb чтобы изменить цвет при скольжении, я получил 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 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, поскольку они ... технически там нет.