All componentsoutlinesolidsmmdlg
Slider
Range selection with track, filled range, and thumb in outline and solid variants.
Variants
Sizes
Install
zsh — slider
1bunx stylexblocks add sliderUsage — Ark UI
slider.tsx
123456789101112131415161718import { Slider } from "#components/ui/ark-ui/slider.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; the Thumb carries the hidden input <Slider.Root defaultValue={[50]} min={0} max={100} variant="outline" size="md" palette={indigoPalette}> <Slider.Control> <Slider.Track> <Slider.Range /> </Slider.Track> <Slider.Thumb index={0} aria-label="Volume" /> </Slider.Control> </Slider.Root> );}
// controlled: <Slider.Root value={value} onValueChange={(d) => setValue(d.value)}>