Slider
An input where the user selects a value from within a given range.
Slider wraps Base UI's Slider.Root with default min and max values and
edge-aligned thumbs; SliderValue displays the current value.
Installation
npx shadcn@latest add @kosori/sliderExample
slider-example.tsx
'use client';
import { Field, FieldLabel } from '@/components/ui/field';
import { Slider, SliderValue } from '@/components/ui/slider';
/** Name the slider thumb for assistive technology. */
const getOpacityLabel = () => 'Opacity';
const SliderExample = () => (
<Field>
<Slider defaultValue={50} getAriaLabel={getOpacityLabel}>
<div className='mb-2 flex items-center justify-between gap-1'>
<FieldLabel>Opacity</FieldLabel>
<SliderValue />
</div>
</Slider>
</Field>
);
export default SliderExample;
Usage
import { Slider } from '@/components/ui/slider';
const SliderDemo = () => <Slider defaultValue={50} />;