Mathieu JouhetCode explorations on ObservableI tweet, therefore I amLet’s connect on LinkedInAlors et la poésie, ça vaut bien le prix d’un sandwich, il faut écouter un poème
Back to gallery

Design engineering: a composable headless slider component

This started out as an exercise, and out of a frustration that both radix and base-ui don’t mask the range when using multiple ranges. They highlight the whole range from the minimum value to the maximum value, including the gap between intermediary values. They also don’t support slider markers, which is one of the features I was looking for. While this component is far less complete than the ones from Radix and Base-ui, it’s feeling useful already. I also added a completely gratuitous velocity based effect on the value indicators, which I stole the idea from a random tweet I can‘t find anymore (if you recognize yourself or know who first posted this, let me know so I can credit).

Fig. 1: a slider with markers

The markers can optionally be made magnetic, with a configurable pixel threshold so the slider thumb snaps to the marker value

Markers
82

Fig. 2: a stepped slider

No slider component would be usable without a step prop

Stepped
32

Fig. 3: multiple ranges

Sometimes you need to provide the user with the option to select multiple ranges within a slider.

Multiple
10426080

Component structure and parts

This component is built following the headless pattern, you decide how you want to style the parts. Here is the basic structure I used in these demos, note that Slider.Value doesn’t have to be within Slider.Thumb, I put it here so it’s positioned relative the to thumb:

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Marker />
  <Slider.Thumb>
    <Slider.Value />
  </Slider.Thumb>
</Slider.Root>
  • Slider.Root: the root, contains all the other parts which it provides context to. Accepts 1 or an even number of values.
  • Slider.Track: the running track for the slider.
  • Slider.Range: the active range for the slider (the highlighted part).
  • Slider.Thumb: the thumb for a given value, there can be 1 or an even number of thumbs.
  • Slider.Value: the current value for a given value.
  • Slider.Marker: a marker for a specified values, there can be any amount of markers.
  • Slider.useSliderContext: in case you need the slider context for custom behavior.

That’s a wrap

Granted; there are missing things: orientation and keyboard controls, mainly, I might add them in the future. But this slider component is already covering quite a lot of my use cases, and it was a fun way to practice the composable headless pattern, which is very powerful when building reusable ui components. And it’s just so damn fun to see the value react to the drag velocity. Stay tuned!

<--

Right before

A split-flap display component

Up next

A tilting card with parallax-->