The Problem

So you need your users to choose from a range of values while giving them a hint about how risky their choice is.

Maybe you reach for Material UI, install 6MB of potentially dangerous dependencies for a single, hard to customize component.

Maybe you’re bought-in to the headless component wave and are in the middle of migrating to your own design system (my case!).

Or maybe you just want a great slider with minimal dependencies.

No matter your situation, this one’s for you, anon.

The Code

So, here’s the Slider. It’s based on a Slider I built for the canonical FIAT protocol frontend.

It’s built with Typescript, React, and Radix UI. The Slider is styled with Stitches, though with a little effort you can swap for CSS Modules or another styling solution. Edit on CodeSandbox

Details of note:

  • The Slider’s track is white by default. The gradient is implemented as a color variant with Stitches. Variants are a powerful way to express a lot of style without a lot of code. Plus, a ton of devs are used to using variants thanks to MUI (color='primary’, anybody?). If you’re interested, read more on variants here.
  • A custom data attribute, [data-inverted], is added to SliderRoot. This is then used as a selector to reverse the gradient. This is in line with the intuitive Radix component APIs, and makes it easy to port the styling of this component over to CSS Modules, or another styling solution. (CSS Modules ftw, I just happened to have Stitches installed because we’re migrating off Next UI.)
  • Fully typed so devs will know all valid color values without having to read the source.

Slider color prop autocompletionGood types = good autocompletion = happy devs Had to do some Typescript-fu to get that to work, just look at how wonky the SliderProps interface is. But from my experience with design systems, wonky types are often the case when creating components that will have good autocompletion for devs.

Tried for a few mins to replicate that choice Developer eXperience™️ with vanilla-extract but couldn’t quite get it. If you can, please message me and I’ll add that example to the CodeSandbox & repo.

Thanks for reading! :3

  • 0xTARC

Subscribe now