Most UI sliders use a range element or a tooltip to indicate the current value of the slider. Some update the range color as a user slides the handle from left to right. I wanted to build a visual indicator in the handle as well, mostly for aesthetic purposes.

Below is a slider I built using jQuery UI Slider. As the user drags the handle from left to right, the color of the handle changes to match the color of the track. Give it a try!

See the Pen Color range slider by Gabriel Tomescu (@gabrieltomescu) on CodePen.

Pretty cool no? Given that this is a jQuery UI Slider, I was constrained to use the pre-defined DOM structure. Here's how it works:

A. Track: Default slider track that contains all slider elements. The track has a 3-stop linear gradient applied.

B. Range: Default jQuery UI Slider range, but made transparent. It grows/shrinks in length as the handle is dragged.

C. Inverse Range: Injected DOM element that covers the slider track (A). As the handle is dragged, this grows/shrinks in direct inverse proportion to the range (B).

D. Handle: Self-explanatory.

E. Dot (mask): Injected DOM element inside the handle (D). It's transparent and acts a mask for the dot background (F).

F. Dot background: This is where the magic happens! It's another injected DOM element inside the dot (E). It's the same width as the slider track (A), and it also has the same 3-stop linear gradient applied. As the handle is dragged, it shifts left/right behind the dot, in direct relation to the position of the handle along the track.

Putting all together, as the user drags the handle (D), the dot background (F) moves behind the dot (E). For example, if we drag the handle from a value of 20% to 30%, we shift the dot background 10% left.