Slider
Input deslizante com marcas opcionais, mínimo/máximo e controle de passo.
Demonstração
Basic
Value: 40
With Marks
Disabled
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
value | number | — | Valor controlado |
defaultValue | number | 0 | Valor padrão (não controlado) |
min | number | 0 | Valor mínimo |
max | number | 100 | Valor máximo |
step | number | 1 | Incremento de passo |
disabled | boolean | false | Desabilita o slider |
marks | SliderMark[] | — | Array de marcas ao longo do trilho |
onChange | (value: number) => void | — | Callback com novo valor |
Uso
import { Slider } from '@ghiberti85/ui'
const [value, setValue] = useState(40)
// Basic
<Slider value={value} onChange={setValue} aria-label="Volume" />
// With marks and step
<Slider
value={value}
onChange={setValue}
step={25}
marks={[
{ value: 0, label: '0' },
{ value: 50, label: '50' },
{ value: 100, label: '100' },
]}
aria-label="Level"
/>
// Disabled
<Slider defaultValue={60} disabled aria-label="Disabled" />