Slider
A diamond-thumb range with an always-readable value.
Live — this one is real
Usage
import { useState } from "react";
import { Slider } from "mizu-ui";
export function Example() {
const [value, setValue] = useState(40);
return (
<Slider
label="Density"
value={value}
min={0}
max={100}
onChange={setValue}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect ui/Slider.tsx
Source is included in the npm package under src/ui/Slider.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Visible range label. |
| value / onChange | number / function | — | Controlled numeric value. |
| min / max / step | number | — | Range and step size. |
Accessibility
Labelled native range: keyboard arrows, Home/End and touch behavior are supplied by the browser.
Motion
Thumb responds to pointer state.