Carregando…Carregando…Carregando…Carregando…Single-value or dual-thumb range input with marks, label, value display and intent colors.
$ npx kikitocn add slider@/lib/utilsimport { Slider } from "@/components/ui/cn/slider/Slider";
export function SliderExample() {
return (
<Slider size="sm" intent="primary" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
range | boolean | false | Ativa o modo de intervalo com dois thumbs (ex-RangeSlider). Com range=true, value/defaultValue/onChange operam com [number, number]. |
showValues | boolean | true | range=true: exibe o par de valores (lo – hi) |
value | number | undefined | Valor atual (controlled) |
defaultValue | number | 0 | Valor inicial (uncontrolled) |
onChange | (value: number) => void | undefined | Callback quando o valor muda |
min | number | 0 | Valor mínimo |
max | number | 100 | Valor máximo |
step | number | 1 | Incremento por passo |
label | string | undefined | Label acima do slider |
showValue | boolean | false | Exibe valor atual ao lado do label |
marks | SliderMark[] | undefined | Marcadores de valor: { value, label? }[] |
previewOnHover | boolean | false | Destaca o segmento entre o valor atual e a posição do cursor ao passar o mouse na trilha, antes de clicar/arrastar (só no modo single, range=false) |
size | 'sm' | 'md' | 'lg' | 'md' | Espessura da trilha e tamanho do thumb |
intent | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | Cor da trilha preenchida |
disabled | boolean | false | Desabilita o slider |
className | string | — | Classes extras pro container raiz |
style | CSSProperties | — | Estilos inline pro container raiz |
With label and value
All intents
Step marks
previewOnHover — highlights where the value would land before clicking
Price range selector
Selected: $20 — $80
Disabled
size='lg' + intent='danger'
Elastic Slider — arrasta além da borda pra esticar o trilho
50
Simple Modern Slider — range nativo com rótulo flutuante
20