Gradient Slider
Set a value on a scale that runs from one feel to another, with named zones along it.
import { GradientSlider, GradientSliderZone } from '@youj/react'
Installation & usage
npm i @youj/reactFor an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.
Use a gradient slider when a value is a feel rather than a number: how freely a model writes, how warm a light is, how strong an effect is. The track is a color gradient, lit up to the thumb. The thumb shows the exact value, and named zones under the track say which stretch you're in, such as "Literal", "Balanced" or "Exploratory".
import { GradientSlider } from '@youj/react'
<GradientSlider
label="Creativity"
value={creativity}
onValueChange={setCreativity}
min={0}
max={1.5}
step={0.05}
zones={[{ label: 'Literal', to: 0.4 }, { label: 'Balanced', to: 0.95 }, { label: 'Exploratory' }]}
/>Each zone runs up to its to value, and the last one runs to max. ticks sets how many divisions the ruler under the track shows, and zone edges get longer ticks. format takes Intl.NumberFormat options for the value. Use onValueCommitted for work that should wait until the thumb is let go, like a save.
Description
A Creativity slider with Literal, Balanced and Exploratory zones under its track.
The same slider in each tone.
The gradient comes from your theme, so it changes with it. Pick it with tone:
spectrum, the default, uses the theme's chart colors from cool to warm. It suggests nothing good or bad, so it suits a preference such as creativity. In a theme without chart colors, it runs from gray to the accent.accentruns the accent from faint to full.statusruns from success through warning to danger. Use it only when the far end really is a risk, such as how much work goes unchecked. On a scale like creativity, a red end would tell people that high values are wrong.
Code
gradient-slider-demo.tsx, the Demo story. The component itself comes from the package.
Reference
Propsvalue, defaultValue, onValueChange… (12)
Props
| Prop | Type | |
|---|---|---|
style | CSSProperties | – |
value | number | – |
defaultValue | number | – |
onValueChange | (value: number) => void | – |
onValueCommitted | (value: number) => voidFires when a drag or key press ends: the moment to save. | – |
label | ReactNodeA visible name over the track (an eyebrow in Bezel). It also names the thumb. | – |
aria-label | stringNames the thumb when there's no visible | – |
zones | GradientSliderZone[]The named stretches of the range, in order: [{ label: 'Literal', to: 0.4 }, …]. The first and last read as its two ends. default [] | [] |
tone | Tone'spectrum''accent''status'The gradient, from the theme’s tokens. default 'spectrum' | 'spectrum' |
ticks | numberHow many divisions the ruler shows. Zone edges and the ends are major ticks. default 10 | 10 |
format | Intl.NumberFormatOptionsIntl.NumberFormat options for the value in the thumb and as spoken. Default: two decimals below 10, whole numbers above. | – |
sound | booleanWith sound on ( default true | true |
Other props pass through: extends SliderPrimitive.Root.Props. | ||
It's built on Base UI's slider, and also takes min, max, step, largeStep, disabled, name and locale.
StylingParts and data attributes
Styling
Parts: gradient-slider (with data-tone), gradient-slider-label, gradient-slider-control, gradient-slider-track, gradient-slider-rail, gradient-slider-fill, gradient-slider-thumb, gradient-slider-value, gradient-slider-ruler, gradient-slider-tick (with data-major), gradient-slider-zones and gradient-slider-zone (with data-active). In Bezel the label and the zone names are small mono capitals.
MotionThumb, hold or focus, new zone
Motion
| Moment | Tokens | ||
|---|---|---|---|
| Thumbfollows the pointer exactly, and keyboard steps land at once | no token no easing | no easing | |
| Hold or focusthe glass thumb swells slightly | duration.fastease.enter140ms · cubic-bezier(0.16, 1, 0.3, 1) | 140mscubic-bezier(0.16, 1, 0.3, 1) | |
| New zoneits name lights up as you cross into it | duration.fastease.standard140ms · cubic-bezier(0.2, 0, 0, 1) | 140mscubic-bezier(0.2, 0, 0, 1) |
Reduced motion
The thumb doesn't swell, and colors change at once. The thumb still follows the pointer and the keys.
AccessibilityKeyboard, ARIA
Accessibility
labelnames the thumb. Without one, usearia-label.- The value is spoken with its zone ("0.65, Balanced"). The wording comes from the labels'
gradientSliderValue, which the language packs translate. - The arrow keys step. Page Up, Page Down and Shift with an arrow take large steps, and Home and End jump to the ends.
- In a right-to-left page the scale runs from the right, and the arrow keys follow.
- With sound on, crossing into another zone plays
tick.sound={false}turns it off.