Slider
Slider is a neobrutalist React component from Cruise UI. Pick a value or a range by dragging: a 12px track, --primary range and square ink thumbs. Install it with npx shadcn@latest add @cruiseui/slider.
Install
Terminal
npx shadcn@latest add @cruiseui/sliderFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
"use client";
import { CruiseSlider } from "@/components/cruise/slider";
const naira = { style: "currency", currency: "NGN", maximumFractionDigits: 0 } as const;
export default function SliderExample() {
return (
<div className="flex max-w-md flex-col gap-8">
<CruiseSlider
label="Price"
defaultValue={[5000, 25000]}
min={0}
max={50000}
step={500}
format={naira}
showLimits
thumbLabels={["Lowest price", "Highest price"]}
/>
<CruiseSlider label="Volume" defaultValue={60} />
</div>
);
}
<div class="slider">
<div class="slider-head">
<label class="field-label" for="price">Max price</label>
<output class="slider-value" for="price" id="price-out">₦25,000</output>
</div>
<input class="slider-native" type="range" id="price" min="0" max="50000" step="500" value="25000" aria-valuetext="₦25,000">
<div class="slider-limits" aria-hidden="true"><span>₦0</span><span>₦50,000</span></div>
</div>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Approximate values in a range: a price filter, volume, distance.
When not to
Exact amounts (use a Naira input or an Input).
Props
CruiseSlider
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | — |
value? | V | — | — |
defaultValue? | V | — | — |
onValueChange? | ((value: V) => void) | — | — |
min? | number | 0 | — |
max? | number | 100 | — |
step? | number | 1 | — |
format? | NumberFormatOptions | — | Number format for the value labels and screen readers, e.g. { style: "currency", currency: "NGN", maximumFractionDigits: 0 }. |
showValue? | boolean | true | The current value(s) next to the label. |
showLimits? | boolean | false | The min and max under the track. |
thumbLabels? | [string, string] | ["Minimum", "Maximum"] | Names for the two thumbs of a range, read after the label. |
disabled? | boolean | — | — |
className? | string | — | — |
Accessibility
- role="slider" thumbs with aria-valuenow and a formatted aria-valuetext (₦25,000).
- Arrows, Page Up / Down, Home / End move the thumbs.
- Each thumb of a range has its own name (Lowest / Highest price).