Slider

Adjust one value or a range with pointer and keyboard input.

CoreBasics@gaudi/design-system/core/SliderView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Slider } from '@gaudi/design-system/core/Slider';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/slider-number-sync.json.

import { Slider } from '@gaudi/design-system/core/Slider';
<Slider aria-label='Volume' value={volume} onValueChange={setVolume} min={0} max={100} />

8 props

Label every thumb and provide a readable value. Use range examples when the two endpoints have different meanings.