Loading…

Slosh Slider

beta

A slider whose fill behaves like liquid: the knob jumps to the value while the fill springs after it, leaning as it moves.

Forms
1 file
3 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add slosh-slider

npm packages installed: class-variance-authority, motion, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { SloshSlider } from "@/components/ui/slosh-slider";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
With Value Text
Disabled

API

Generated from the component's own types, so a prop cannot appear here without existing.

<SloshSlider>

Prop	Type	Default
`corner` 0–20. Corner radius of the bar, in px.	`number`	`13`
`defaultValue` Initial value when uncontrolled.	`number`	`62`
`fill`	`"light" \| "dark"`	`"light"`
`formatValue` Spoken value (`aria-valuetext`), for units: `(v) => \`${v}%\``.	`(value: number) => string`	—
`largeStep` Steps moved by Page Up / Page Down (multiplied by `step`).	`number`	`10`
`momentum` 0–100. The fill's mass: higher overshoots further and settles slower.	`number`	`55`
`onValueChange` Called on every change while dragging or keying.	`(value: number) => void`	—
`onValueCommit` Called when an interaction ends: pointer released or key pressed.	`(value: number) => void`	—
`stroke` A 1px inset hairline ring around the bar.	`boolean`	`false`
`tilt` 0–100. How far the leading edge leans per unit of fill velocity.	`number`	`45`
`value` Controlled value.	`number`	—
`viscosity` 0–100. Damping: higher is thicker liquid — less slosh, more lag.	`number`	`15`

Every prop of Radix UI’s Slider.Root, plus className.

Accessibility

Built on the Radix slider: the knob is a focusable role="slider" with aria-valuenow, -valuemin and -valuemax, pointer jump-to-value, arrow keys (mirrored in right-to-left layouts), Home/End, and Page Up/Down moving by largeStep. aria-label, aria-labelledby and aria-valuetext (or formatValue) are forwarded onto the thumb, and a development warning fires when it is unnamed — no default name is baked in. The focus ring is drawn around the whole bar. The liquid fill is aria-hidden decoration; under reduced motion it jumps with the knob and never leans.

Quality

Measured from the source and its tests at build time.

All scores

8/9

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — does not apply
className merged — passes
Visible focus — fails
No fixed widths — passes

Prop

Type

Default

corner

0–20. Corner radius of the bar, in px.

number

13

defaultValue

Initial value when uncontrolled.

number

62

fill

"light" | "dark"

"light"

formatValue

Spoken value (aria-valuetext), for units: (v) => \${v}%\``.

(value: number) => string

—

largeStep

Steps moved by Page Up / Page Down (multiplied by step).

number

10

momentum

0–100. The fill's mass: higher overshoots further and settles slower.

number

55

onValueChange

Called on every change while dragging or keying.

(value: number) => void

—

onValueCommit

Called when an interaction ends: pointer released or key pressed.

(value: number) => void

—

stroke

A 1px inset hairline ring around the bar.

boolean

false

tilt

0–100. How far the leading edge leans per unit of fill velocity.

number

45

value

Controlled value.

number

—

viscosity

0–100. Damping: higher is thicker liquid — less slosh, more lag.

number

15