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 — Base UI
slider.tsx
123456789101112131415161718import { Slider } from "#components/ui/base-ui/slider.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; parts inherit them via context <Slider.Root defaultValue={50} min={0} max={100} variant="outline" size="md" palette={indigoPalette}> <Slider.Control> <Slider.Track> <Slider.Indicator /> </Slider.Track> <Slider.Thumb aria-label="Volume" /> </Slider.Control> </Slider.Root> );}
// controlled: <Slider.Root value={value} onValueChange={setValue}>