How to highlight active slider with Javascript?

Question

I have two sliders on my page, with range between 0 and 100. The user is supposed to choose the value of the slider by clicking on it, and then potentially using the arrow keys of the keyboard (for precision).

How can I highlight (= change the appearance) of the active slider, so that it is obvious for the user which value (s)he is choosing?

Answer 1

Use the :focus CSS pseudo selector. Properties that will be visibly indicated differ between browsers. For example, Chrome won't show background-color or border , but will show outline .

 input[type="range"]:focus { background-color: blue; border: 2px solid red; outline: 2px solid red; }

 <input type="range" min="0" max="100" step="5"> <input type="range" min="0" max="100" step="5">