Can´t change knob style from a ranged input in mobile

Question

I´m having trouble with the mobile part of a Javascript metronome project, I want for the knob on the ranged input to grow when is clicked and hold, or when is touched and hold. With the desktop part I have no problem, I just added an :active pseudoclass with a transform scale, but it´s not working on touch events. Any idea what should I do? Here´s how it´s set up in CSS for desktop:

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

I´ve tried making it with JS instead of CSS, but I´m not sure how to adress just the know from the input, I tried placing this on the touchstart event, but i´ts still not working:

slider.style.setProperty('--thumb-scale', '2');

Answer 1

You can use the :active pseudo-selector, I would not use the ::-webkit-slider-thumb part and I would change it to

input[type="range"]:active