React Slider Component Examples

The canonical Slider use is a single-thumb control with a number readout sitting just above or below. Hold volume in useState, pass it as value, pass setVolume as onChange, and let the component handle every drag, click, and snap on the track. The min={0} max={100} defaults are already what a percentage control wants, so this is the smallest possible setup.

The label updates inline because setVolume runs on every pointer move — the component's handlePointerDown resolver fires for both the initial click and every pointermove until pointerup. That means the readout tracks the thumb in real time without any throttling or debounce on the consumer side. Wrap the whole panel in a Card for a settings row, or drop it straight into a Popover for a header-bar volume toggle.

The same pattern as the volume control, dressed for a settings row: a Label on the left, the Slider in the middle, the percentage on the right. Use htmlFor on the label and a matching id on the Slider for the accessibility wiring. The wrapper is a flex row with items-center gap-4 so the three pieces line up vertically; the Slider stretches to fill the remaining space via flex-1.

The readout uses a fixed-width tabular-nums text node so the digits do not jitter when the value crosses single → double → triple digits. For a row of settings — brightness, contrast, saturation, hue — stack three or four of these inside a single Card. Each Slider keeps its own useState, or share a single object state if your settings save together.

For a panel control that lives inside a toolbar or a layers sidebar, the vertical orientation reads better than a horizontal bar. Pass orientation="vertical" and the component swaps to the styles.vertical ruleset: the base height is h-48, the track runs the full height, the range fills from the bottom up, and the thumb sits at left-1/2 -translate-x-1/2. The percentage maps the same way — zero at the bottom, max at the top.

The vertical Slider is also where the vTrack width in the size mapping matters. size="sm" makes the track w-1, md (default) is w-1.5, lg is w-2. Pair the vertical Slider with a small numeric input above or below it for keyboard-only editing — Drivn's Slider does not bind arrow keys to step the value, so the input gives keyboard users a path. Drop the whole assembly into a fixed-width sidebar around 80 pixels wide.

Set step={25} and the component snaps to 0 / 25 / 50 / 75 / 100. The snap helper inside the component runs Math.round((val - min) / step) * step + min on every pointer move, so the thumb visibly jumps between the discrete positions rather than gliding. This is the right pattern for quality presets ("low / medium / high / ultra"), star ratings on a 0–10 scale with a step of 1, or any input where the underlying value is enumerated and the user needs to feel the click.

The value you receive in onChange is always already snapped, so the rest of your code can treat the slider as a typed enum lookup: ["low", "medium", "high", "ultra"][quality / 25]. Combine step with min and max for non-percentage ranges — min={1} max={5} step={1} gives a five-position rating control, min={-50} max={50} step={5} gives an eleven-position centered scale.

The Slider ships with three built-in size tokens — sm, md, lg — that map directly to the styles.sizes object inside the component file. sm is h-1 track with a 12-pixel thumb, md is h-1.5 with a 16-pixel thumb (the default), lg is h-2 with a 20-pixel thumb. The vertical orientation uses the matching vTrack widths so the proportions stay consistent on both axes.

Use sm inside dense table rows, settings dialogs, or anywhere a single slider sits next to dense form controls. Use md as the default for stand-alone controls in a page or panel. Use lg when the slider is the primary affordance — a featured volume control on a media player, a centerpiece quality dial in an editor. Mixing sizes inside the same container is fine; the value type, the API, and the styling object are identical across all three.

Pass disabled and the component applies opacity-50 cursor-default pointer-events-none to the wrapper, which freezes the thumb, dims the track, and stops every pointer event from reaching the resolver. The hidden range input keeps its current value, so a disabled Slider inside a form still submits — useful for "preview the current setting but do not let the user change it" rows in a billing page or an admin view.

The disabled visual matches the rest of the Drivn UI primitives — the same opacity floor as a disabled Button, the same cursor reset, the same pointer-events lock. Toggle the prop on a permission boolean and the row reads as informational when the user lacks edit access, and as interactive when they do.

The component renders a hidden <input type="range" name={name} value={current} min max step> next to the visual thumb, set to readOnly and tabIndex={-1} so it does not steal focus. Pass a name prop and the slider participates in standard HTML form submission — the input ships the current numeric value when the form posts to a server action or a fetch handler. For a Next.js App Router server action, this means no useState, no client onSubmit, no formData wiring beyond reading the named field.

With no name prop, the input still renders but with name="", so the field is silently dropped from the FormData. Pair the slider with a Label for the visible setting name and a submit Button for the post action. For controlled forms with react-hook-form, wire value and onChange to the Controller API and let it own the form state — the hidden input becomes optional in that flow.