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!
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);
}