Liquid slider68 / 100
Blend68%
0%100%
Density6
012
Liquid Slider
A range slider whose readout hangs off the thumb as a real liquid mass — it stretches on the drag, swallows step beads as it passes them, and keeps its glyphs razor sharp because the text rides the crisp layer above the goo.
Dependencies
Interaction Types
Drag the thumb — the readout necks, stretches, and settles behind it on spring physics
Step beads merge into the travelling blob and let go again on the way past
Arrows step, PageUp / PageDown jump ten, Home / End snap to the bounds
How to use
'use client';
import { useState } from "react";
import { LiquidSlider } from "@/components/liquid-slider";
export default function Demo() {
const [blend, setBlend] = useState(68);
return (
<LiquidSlider
label="Blend"
value={blend}
onValueChange={setBlend}
formatValue={(v) => `${v}%`}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value |
| defaultValue | number | min | Initial value in uncontrolled mode |
| onValueChange | (value: number) => void | — | Fires on every committed step change |
| onValueCommit | (value: number) => void | — | Fires once when the interaction ends — use this for expensive work |
| min | number | 0 | Lower bound of the rail |
| max | number | 100 | Upper bound of the rail |
| step | number | 1 | Snap increment |
| label | string | — | Mono eyebrow rendered above the rail |
| formatValue | (value: number) => string | (v) => String(v) | Formats the readout and both rail bounds |
| showTicks | boolean | auto | Liquid step beads on the rail. Defaults to on for up to 24 steps |
| disabled | boolean | false | Disables pointer and keyboard interaction |