How can i change webkit-slider-thumb color using javascript?

Issue

I want to change the color of the input range and it works with CSS, But i want to change the color using javascript. Please help to fix this.

Working CSS

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: goldenrod !important;
}

Javascript code

document.querySelector('.plyr--full-ui input[type=range]').style.setProperty('--plyr-range-thumb-background', 'green')

Any solution appreciated!

Solution

You're in the right direction with CSS custom properties (variables). Just change the background to the custom property and set its default color:

input[type='range']::-webkit-slider-thumb {
  --plyr-range-thumb-background: goldenrod;
  -webkit-appearance: none;
  background: var(--plyr-range-thumb-background);
}

Answered By - code