How to add input type range thumb css dynamically in setAttribute java-script function

Question

I want to add

Input['range']::-webkit-slider-thumb {
  box-shadow: inset 0 0 16px #B2B200, inset 16px 0 20px #B2B200;
}

Dynamically through java-script setAttribute function with :

rangePart.setAttribute("style", 'css code here');

Temani Afif · Accepted Answer · 2019-07-12T11:46:06.697

You can consider CSS variables to do this but you have to define them in the property intially.

Example if you want to change the color:

document.querySelector('#one').style.setProperty("--c", "blue");

input[type='range']::-webkit-slider-thumb {
  box-shadow: 
    inset 0 0 16px var(--c,#B2B200), 
    inset 16px 0 20px var(--c,#B2B200);
}

<input type="range" id="one">

<input type="range" >

Or if you want to change the whole property:

document.querySelector('#one').style.setProperty("--s", "10px 10px inset blue,0 0 10px red");

input[type='range']::-webkit-slider-thumb {
  box-shadow: 
    var(--s,
    inset 0 0 16px #B2B200, 
    inset 16px 0 20px #B2B200);
}

<input type="range" id="one">

<input type="range" >

1 Answers1