@etus/ui 0.1.0

package/src/components/forms/Slider/README.md

@@ -0,0 +1,1246 @@
+# Slider
+
+## Visão Geral
+
+O **Slider** e um componente de formulario que permite aos usuarios selecionar um valor ou intervalo (range) dentro de um espectro continuo. Construido sobre o primitivo `@radix-ui/react-slider`, oferece suporte nativo a acessibilidade, orientacao vertical/horizontal e multiplos thumbs para selecao de ranges.
+
+### Casos de Uso
+
+- Selecao de valores numericos (volume, brilho, preco)
+- Filtros de range (preco minimo/maximo, idade)
+- Controles de ajuste fino (zoom, opacidade)
+- Configuracoes de preferencia do usuario
+- Progress controls em players de midia
+
+### Classificacao
+
+**Categoria:** Form Input
+**Dependencias:** `@radix-ui/react-slider`
+
+---
+
+## Design Specs
+
+### Orientacao (`orientation`)
+
+| Orientacao | Uso | Classes |
+|------------|-----|---------|
+| `horizontal` | Padrao, uso geral | `data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full` |
+| `vertical` | Espacos verticais, controles laterais | `data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5` |
+
+### Tamanhos (`size`)
+
+| Tamanho | Track | Thumb | Uso |
+|---------|-------|-------|-----|
+| `sm` | `h-1.5` (6px) | `size-5` (20px) | Espacos compactos, interfaces densas |
+| `md` | `h-2` (8px) | `size-6` (24px) | Padrao, uso geral |
+| `lg` | `h-2.5` (10px) | `size-7` (28px) | Areas de destaque, touch-friendly |
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Track `bg-muted`, range `bg-primary` |
+| Hover | `hover:ring-4` | Ring de 4px ao redor do thumb |
+| Focus | `focus-visible:ring-4` | Ring de 4px com `ring-ring/50` |
+| Disabled | `data-[disabled]:opacity-50` | 50% opacidade em todo o componente |
+| Dragging | - | Thumb segue o cursor/touch |
+
+### Tokens Utilizados
+
+```css
+/* Cores */
+--muted            /* Fundo do track */
+--primary          /* Cor do range preenchido */
+--primary (border) /* Borda do thumb */
+--ring             /* Focus ring */
+--background       /* Fundo do thumb (white) */
+
+/* Dimensoes */
+size-4             /* 16px - tamanho do thumb */
+h-1.5              /* 6px - altura do track horizontal */
+w-1.5              /* 6px - largura do track vertical */
+min-h-44           /* 176px - altura minima vertical */
+
+/* Bordas */
+rounded-full       /* Track e thumb */
+border             /* Borda do thumb */
+
+/* Sombras */
+shadow-sm          /* Sombra do thumb */
+
+/* Transicoes */
+transition-[color,box-shadow]  /* Transicao suave do thumb */
+```
+
+### data-slot
+
+```html
+<span data-slot="slider">
+  <span data-slot="slider-track">
+    <span data-slot="slider-range">...</span>
+  </span>
+  <span data-slot="slider-thumb">
+    <span data-slot="slider-label">50%</span>     <!-- labelType="text" -->
+    <span data-slot="slider-tooltip">50%</span>   <!-- labelType="tooltip" -->
+  </span>
+  <span data-slot="slider-thumb">...</span>       <!-- range mode -->
+  <span data-slot="slider-marks">                 <!-- marks prop -->
+    <span data-slot="slider-mark">
+      <span data-slot="slider-mark-tick"></span>
+      <span data-slot="slider-mark-label">0%</span>
+    </span>
+  </span>
+</span>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `value` | `number[]` | - | Valor controlado (array para suportar range) |
+| `defaultValue` | `number[]` | `[min]` | Valor inicial nao-controlado |
+| `min` | `number` | `0` | Valor minimo do slider |
+| `max` | `number` | `100` | Valor maximo do slider |
+| `step` | `number` | `1` | Incremento entre valores |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direcao do slider |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Tamanho visual do slider |
+| `labelType` | `"none" \| "text" \| "tooltip"` | `"none"` | Tipo de exibicao do valor |
+| `color` | `"default" \| "primary" \| "success" \| "warning" \| "error"` | `"default"` | Variante de cor |
+| `formatValue` | `(value: number) => string` | `(v) => \`${v}%\`` | Funcao para formatar o valor exibido |
+| `marks` | `boolean \| SliderMark[]` | - | Indicadores de valores no track |
+| `getAriaValueText` | `(value: number, index: number) => string` | - | Texto acessivel para screen readers |
+| `disabled` | `boolean` | `false` | Desabilita interacao |
+| `inverted` | `boolean` | `false` | Inverte a direcao visual |
+| `minStepsBetweenThumbs` | `number` | `0` | Distancia minima entre thumbs (range mode) |
+| `className` | `string` | - | Classes CSS adicionais |
+| `name` | `string` | - | Nome do campo para formularios |
+| `ref` | `Ref<HTMLSpanElement>` | - | Referencia ao elemento DOM |
+
+> Herda todas as props de `React.ComponentProps<typeof SliderPrimitive.Root>`
+
+### Callbacks
+
+| Callback | Tipo | Descricao |
+|----------|------|-----------|
+| `onValueChange` | `(value: number[]) => void` | Disparado ao alterar o valor (durante arrasto) |
+| `onValueCommit` | `(value: number[]) => void` | Disparado ao finalizar alteracao (soltar thumb) |
+
+### TypeScript
+
+```typescript
+import type { SliderProps, SliderMark, SliderColor, SliderSize } from "@etus/ui"
+
+// Tipos exportados
+type SliderSize = "sm" | "md" | "lg"
+type SliderLabelType = "none" | "text" | "tooltip"
+type SliderColor = "default" | "primary" | "success" | "warning" | "error"
+type SliderFormatValue = (value: number) => string
+type SliderGetAriaValueText = (value: number, index: number) => string
+
+interface SliderMark {
+  value: number
+  label?: string
+}
+
+interface SliderProps extends ComponentProps<SliderPrimitive.Root> {
+  size?: SliderSize
+  labelType?: SliderLabelType
+  color?: SliderColor
+  formatValue?: SliderFormatValue
+  marks?: boolean | SliderMark[]
+  getAriaValueText?: SliderGetAriaValueText
+}
+
+// Exemplos de tipagem
+interface PriceSliderProps {
+  value: [number, number]
+  onChange: (value: [number, number]) => void
+  min?: number
+  max?: number
+}
+```
+
+### Comparativo com Design Systems de Referencia
+
+#### Matriz de Features (14 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | PrimeReact |
+|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:----------:|
+| **Range (2 thumbs)** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ | ✓ |
+| **Multi-thumb (3+)** | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | - | - | - | - | - | - | - |
+| **Vertical** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ | ✓ |
+| **Marks/Ticks** | ✓ | - | - | - | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ | ✓ |
+| **Tooltip** | ✓ | - | - | - | - | ✓ | ✓ | ✓ | - | - | - | ✓ | - | ✓ |
+| **Custom track** | ~ | ~ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ | ✓ |
+| **Inverted** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | - | - | ✓ |
+| **Step** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ |
+| **Disabled** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ |
+| **Form integration** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ |
+| **onValueCommit** | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | - | - | - | - | - | ✓ |
+| **Keyboard nav** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ |
+| **ARIA compliant** | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ | - | - | ✓ | ✓ | ✓ |
+| **RTL support** | - | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | - | ✓ | ✓ | ✓ |
+| **Color variants** | ✓ | - | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | - | - | - |
+
+**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Nao suportado
+
+#### Comparativo de Props por Design System
+
+| Prop | ETUS | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon |
+|------|:----:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|
+| `value` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `defaultValue` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `min/max` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `step` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `orientation` | ✓ | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ |
+| `disabled` | ✓ | `isDisabled` | ✓ | ✓ | ✓ | `isDisabled` | ✓ | ✓ |
+| `onChange` | `onValueChange` | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| `onChangeEnd` | `onValueCommit` | ✓ | `onChangeCommitted` | `onChangeEnd` | `onAfterChange` | - | - | - |
+| `marks` | ✓ | - | ✓ | ✓ | ✓ | - | ✓ | ✓ |
+| `tooltip` | `labelType` | - | ✓ | - | ✓ | - | ✓ | - |
+| `color` | ✓ | `colorScheme` | `color` | `color` | - | `color` | - | - |
+| `size` | ✓ | `size` | `size` | `size` | - | `size` | `size` | - |
+| `thumbLabel` | `labelType` | - | `valueLabelDisplay` | `label` | ✓ | - | - | - |
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Uso |
+|----------|-----|
+| `role="slider"` | Aplicado automaticamente a cada thumb |
+| `aria-valuemin` | Valor minimo do slider |
+| `aria-valuemax` | Valor maximo do slider |
+| `aria-valuenow` | Valor atual do thumb |
+| `aria-valuetext` | Texto legivel do valor (opcional) |
+| `aria-orientation` | Direcao do slider |
+| `aria-disabled` | Quando `disabled={true}` |
+| `aria-label` / `aria-labelledby` | Rotulo acessivel |
+
+### Suporte a Teclado
+
+| Tecla | Acao |
+|-------|------|
+| `Tab` | Move foco para/entre thumbs |
+| `Arrow Right` / `Arrow Up` | Incrementa valor por `step` |
+| `Arrow Left` / `Arrow Down` | Decrementa valor por `step` |
+| `Page Up` | Incrementa valor por step maior (10x) |
+| `Page Down` | Decrementa valor por step maior (10x) |
+| `Home` | Define valor para `min` |
+| `End` | Define valor para `max` |
+
+### Focus Management
+
+```tsx
+// Focus visible apenas para navegacao por teclado
+focus-visible:ring-4
+focus-visible:ring-ring/50
+focus-visible:outline-hidden
+
+// Thumb focusavel
+<span role="slider" tabindex="0" ... />
+```
+
+### Contraste de Cores
+
+Todos os pares de cores seguem WCAG 2.1 AA (minimo 3:1 para componentes UI):
+
+| Elemento | Foreground | Background | Ratio |
+|----------|------------|------------|-------|
+| Track | `--muted` | `--background` | >= 3:1 |
+| Range | `--primary` | `--muted` | >= 3:1 |
+| Thumb | white | `--primary` (border) | >= 4.5:1 |
+| Focus ring | `--ring/50` | qualquer | >= 3:1 |
+
+### Screen Readers
+
+- Cada thumb e anunciado como "slider" com seu valor atual
+- Usar `aria-label` para descrever o proposito do slider
+- Para range, identificar cada thumb: "Preco minimo", "Preco maximo"
+- Usar `getAriaValueText` para valores formatados: "R$ 50,00" em vez de "50"
+
+```tsx
+// Exemplo com getAriaValueText
+<Slider
+  aria-label="Selecionar preco"
+  value={[price]}
+  onValueChange={([v]) => setPrice(v)}
+  getAriaValueText={(value) => `R$ ${value.toFixed(2)}`}
+/>
+
+// Range slider com identificacao de thumbs
+<Slider
+  aria-label="Faixa de preco"
+  value={[minPrice, maxPrice]}
+  getAriaValueText={(value, index) =>
+    index === 0
+      ? `Preco minimo: R$ ${value}`
+      : `Preco maximo: R$ ${value}`
+  }
+/>
+```
+
+### Reduced Motion
+
+```tsx
+// O thumb usa transicao que respeita preferencia do usuario
+transition-[color,box-shadow]
+
+// Em CSS global
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="slider-thumb"] {
+    transition: none;
+  }
+}
+```
+
+### Comparativo A11y (14 Design Systems)
+
+| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
+| **role="slider"** | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **aria-valuemin/max** | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **aria-valuenow** | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ~ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **aria-valuetext** | ✓ | ✓ | ~ | - | - | ~ | ✓ | ~ | ~ | ~ | ✓ | ✓ | ✓ | ~ |
+| **Keyboard nav** | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **Focus visible** | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| **Touch support** | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ~ | ✓ |
+| **Reduced motion** | ~ | ✓ | ~ | - | - | ✓ | ✓ | ✓ | - | ~ | ✓ | ✓ | - | - |
+| **High contrast** | - | ✓ | - | - | - | - | - | - | - | - | ✓ | ✓ | - | - |
+| **RTL support** | - | ✓ | - | - | - | ✓ | ✓ | ✓ | ✓ | - | ✓ | ✓ | - | ✓ |
+
+**Legenda:** ✓ = Suporte completo | ~ = Parcial/Manual | - = Nao suportado
+
+---
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function Example() {
+  return (
+    <Slider defaultValue={[50]} max={100} step={1} />
+  )
+}
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react"
+import { Slider } from "@etus/ui"
+
+function ControlledSlider() {
+  const [value, setValue] = useState([25])
+
+  return (
+    <div className="space-y-2">
+      <Slider
+        value={value}
+        onValueChange={setValue}
+        max={100}
+        step={1}
+      />
+      <p className="text-sm text-muted-foreground">
+        Valor: {value[0]}
+      </p>
+    </div>
+  )
+}
+```
+
+### Range (Dois Thumbs)
+
+```tsx
+import { useState } from "react"
+import { Slider } from "@etus/ui"
+
+function RangeSlider() {
+  const [range, setRange] = useState([20, 80])
+
+  return (
+    <div className="space-y-2">
+      <Slider
+        value={range}
+        onValueChange={setRange}
+        min={0}
+        max={100}
+        step={5}
+        minStepsBetweenThumbs={1}
+      />
+      <p className="text-sm text-muted-foreground">
+        Range: {range[0]} - {range[1]}
+      </p>
+    </div>
+  )
+}
+```
+
+### Orientacao Vertical
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function VerticalSlider() {
+  return (
+    <div className="h-48">
+      <Slider
+        defaultValue={[50]}
+        orientation="vertical"
+        max={100}
+        step={1}
+      />
+    </div>
+  )
+}
+```
+
+### Com Label e Valor
+
+```tsx
+import { useState } from "react"
+import { Slider } from "@etus/ui"
+import { Label } from "@etus/ui"
+
+function LabeledSlider() {
+  const [volume, setVolume] = useState([75])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Label htmlFor="volume">Volume</Label>
+        <span className="text-sm font-medium tabular-nums">
+          {volume[0]}%
+        </span>
+      </div>
+      <Slider
+        id="volume"
+        value={volume}
+        onValueChange={setVolume}
+        max={100}
+        step={1}
+        aria-label="Volume"
+      />
+    </div>
+  )
+}
+```
+
+### Filtro de Preco
+
+```tsx
+import { useState } from "react"
+import { Slider } from "@etus/ui"
+
+function PriceFilter() {
+  const [priceRange, setPriceRange] = useState([100, 500])
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("pt-BR", {
+      style: "currency",
+      currency: "BRL",
+    }).format(value)
+  }
+
+  return (
+    <div className="space-y-4 w-72">
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium">Faixa de Preco</span>
+      </div>
+      <Slider
+        value={priceRange}
+        onValueChange={setPriceRange}
+        min={0}
+        max={1000}
+        step={10}
+        minStepsBetweenThumbs={2}
+        aria-label="Faixa de preco"
+      />
+      <div className="flex justify-between text-sm text-muted-foreground">
+        <span>{formatCurrency(priceRange[0])}</span>
+        <span>{formatCurrency(priceRange[1])}</span>
+      </div>
+    </div>
+  )
+}
+```
+
+### Com Step Personalizado
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function StepSlider() {
+  return (
+    <div className="space-y-6">
+      {/* Step de 1 */}
+      <Slider defaultValue={[50]} max={100} step={1} />
+
+      {/* Step de 10 */}
+      <Slider defaultValue={[50]} max={100} step={10} />
+
+      {/* Step de 25 */}
+      <Slider defaultValue={[50]} max={100} step={25} />
+    </div>
+  )
+}
+```
+
+### Com onValueCommit
+
+```tsx
+import { useState } from "react"
+import { Slider } from "@etus/ui"
+
+function CommitSlider() {
+  const [tempValue, setTempValue] = useState([50])
+  const [committedValue, setCommittedValue] = useState(50)
+
+  return (
+    <div className="space-y-4">
+      <Slider
+        value={tempValue}
+        onValueChange={setTempValue}
+        onValueCommit={([value]) => {
+          setCommittedValue(value)
+          // Executar acao pesada apenas ao soltar
+          console.log("Valor final:", value)
+        }}
+        max={100}
+      />
+      <div className="text-sm">
+        <p>Arrastando: {tempValue[0]}</p>
+        <p>Valor final: {committedValue}</p>
+      </div>
+    </div>
+  )
+}
+```
+
+### Estados
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function SliderStates() {
+  return (
+    <div className="space-y-6">
+      {/* Default */}
+      <Slider defaultValue={[50]} max={100} />
+
+      {/* Disabled */}
+      <Slider defaultValue={[50]} max={100} disabled />
+    </div>
+  )
+}
+```
+
+### Responsividade
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function ResponsiveSlider() {
+  return (
+    <div className="w-full max-w-md">
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        className="w-full"
+      />
+    </div>
+  )
+}
+```
+
+### Composicao com Formulario
+
+```tsx
+import { useForm, Controller } from "react-hook-form"
+import { Slider } from "@etus/ui"
+import { Button } from "@etus/ui"
+import { Label } from "@etus/ui"
+
+interface FormData {
+  brightness: number[]
+}
+
+function SliderForm() {
+  const { control, handleSubmit } = useForm<FormData>({
+    defaultValues: {
+      brightness: [50],
+    },
+  })
+
+  const onSubmit = (data: FormData) => {
+    console.log("Brightness:", data.brightness[0])
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div className="space-y-2">
+        <Label>Brilho</Label>
+        <Controller
+          name="brightness"
+          control={control}
+          render={({ field }) => (
+            <Slider
+              value={field.value}
+              onValueChange={field.onChange}
+              max={100}
+              step={1}
+              aria-label="Brilho"
+            />
+          )}
+        />
+      </div>
+      <Button type="submit">Salvar</Button>
+    </form>
+  )
+}
+```
+
+### Tamanhos
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function SizeSlider() {
+  return (
+    <div className="space-y-6">
+      {/* Pequeno */}
+      <Slider defaultValue={[50]} size="sm" />
+
+      {/* Medio (padrao) */}
+      <Slider defaultValue={[50]} size="md" />
+
+      {/* Grande */}
+      <Slider defaultValue={[50]} size="lg" />
+    </div>
+  )
+}
+```
+
+### Variantes de Cor
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function ColorSlider() {
+  return (
+    <div className="space-y-6">
+      {/* Default */}
+      <Slider defaultValue={[50]} color="default" />
+
+      {/* Primary */}
+      <Slider defaultValue={[50]} color="primary" />
+
+      {/* Success */}
+      <Slider defaultValue={[75]} color="success" />
+
+      {/* Warning */}
+      <Slider defaultValue={[60]} color="warning" />
+
+      {/* Error */}
+      <Slider defaultValue={[25]} color="error" />
+    </div>
+  )
+}
+```
+
+### Com Marks
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function MarksSlider() {
+  return (
+    <div className="space-y-8">
+      {/* Marks automaticos baseados no step */}
+      <Slider defaultValue={[50]} marks step={25} />
+
+      {/* Marks customizados com labels */}
+      <Slider
+        defaultValue={[50]}
+        marks={[
+          { value: 0, label: "0%" },
+          { value: 25, label: "25%" },
+          { value: 50, label: "50%" },
+          { value: 75, label: "75%" },
+          { value: 100, label: "100%" },
+        ]}
+      />
+
+      {/* Marks sem labels */}
+      <Slider
+        defaultValue={[50]}
+        marks={[
+          { value: 0 },
+          { value: 25 },
+          { value: 50 },
+          { value: 75 },
+          { value: 100 },
+        ]}
+      />
+    </div>
+  )
+}
+```
+
+### Label Type - Texto e Tooltip
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function LabelTypeSlider() {
+  return (
+    <div className="space-y-8">
+      {/* Sem label (padrao) */}
+      <Slider defaultValue={[50]} labelType="none" />
+
+      {/* Label de texto abaixo do thumb */}
+      <Slider defaultValue={[50]} labelType="text" />
+
+      {/* Tooltip flutuante acima do thumb */}
+      <Slider defaultValue={[50]} labelType="tooltip" />
+
+      {/* Com formatacao customizada */}
+      <Slider
+        defaultValue={[50]}
+        labelType="tooltip"
+        formatValue={(v) => `R$ ${v},00`}
+      />
+    </div>
+  )
+}
+```
+
+### Acessibilidade com getAriaValueText
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function AccessibleSlider() {
+  return (
+    <div className="space-y-6">
+      {/* Valor de porcentagem */}
+      <Slider
+        defaultValue={[50]}
+        getAriaValueText={(value) => `${value} por cento`}
+        aria-label="Progresso"
+      />
+
+      {/* Range de preco */}
+      <Slider
+        defaultValue={[100, 500]}
+        min={0}
+        max={1000}
+        getAriaValueText={(value, index) =>
+          index === 0
+            ? `Preco minimo: R$ ${value}`
+            : `Preco maximo: R$ ${value}`
+        }
+        aria-label="Faixa de preco"
+      />
+
+      {/* Volume com nivel */}
+      <Slider
+        defaultValue={[75]}
+        getAriaValueText={(value) => {
+          if (value === 0) return "Mudo"
+          if (value < 30) return `Volume baixo: ${value}%`
+          if (value < 70) return `Volume medio: ${value}%`
+          return `Volume alto: ${value}%`
+        }}
+        aria-label="Volume"
+      />
+    </div>
+  )
+}
+```
+
+### Customizacao de Cores via CSS
+
+```tsx
+import { Slider } from "@etus/ui"
+
+function CustomColorSlider() {
+  return (
+    <div className="space-y-6">
+      {/* Track e range customizados via CSS variables */}
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        className="[&_[data-slot=slider-track]]:bg-blue-100 [&_[data-slot=slider-range]]:bg-blue-500"
+      />
+
+      {/* Thumb customizado */}
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        className="[&_[data-slot=slider-thumb]]:border-green-500 [&_[data-slot=slider-range]]:bg-green-500"
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Testes
+
+### Testes Unitarios
+
+```tsx
+// Slider.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { Slider } from "./Slider"
+
+describe("Slider", () => {
+  it("renders with default value", () => {
+    render(<Slider defaultValue={[50]} max={100} />)
+    expect(screen.getByRole("slider")).toBeInTheDocument()
+  })
+
+  it("renders range slider with two thumbs", () => {
+    render(<Slider defaultValue={[20, 80]} max={100} />)
+    const sliders = screen.getAllByRole("slider")
+    expect(sliders).toHaveLength(2)
+  })
+
+  it("has correct aria-valuemin and aria-valuemax", () => {
+    render(<Slider defaultValue={[50]} min={10} max={90} />)
+    const slider = screen.getByRole("slider")
+    expect(slider).toHaveAttribute("aria-valuemin", "10")
+    expect(slider).toHaveAttribute("aria-valuemax", "90")
+  })
+
+  it("has correct aria-valuenow", () => {
+    render(<Slider defaultValue={[50]} max={100} />)
+    const slider = screen.getByRole("slider")
+    expect(slider).toHaveAttribute("aria-valuenow", "50")
+  })
+
+  it("has data-slot attribute", () => {
+    render(<Slider defaultValue={[50]} max={100} />)
+    const container = document.querySelector("[data-slot='slider']")
+    expect(container).toBeInTheDocument()
+  })
+
+  it("merges custom className", () => {
+    render(<Slider defaultValue={[50]} className="custom-class" />)
+    const container = document.querySelector("[data-slot='slider']")
+    expect(container).toHaveClass("custom-class")
+  })
+
+  it("applies disabled state", () => {
+    render(<Slider defaultValue={[50]} disabled />)
+    const slider = screen.getByRole("slider")
+    expect(slider).toHaveAttribute("aria-disabled", "true")
+  })
+
+  it("renders vertical orientation", () => {
+    render(<Slider defaultValue={[50]} orientation="vertical" />)
+    const slider = screen.getByRole("slider")
+    expect(slider).toHaveAttribute("aria-orientation", "vertical")
+  })
+})
+```
+
+### Testes de Interacao
+
+```tsx
+describe("Slider interactions", () => {
+  it("calls onValueChange when value changes", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(handleChange).toHaveBeenCalled()
+  })
+
+  it("increases value with ArrowRight key", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        step={1}
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(handleChange).toHaveBeenCalledWith([51])
+  })
+
+  it("decreases value with ArrowLeft key", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        step={1}
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{ArrowLeft}")
+
+    expect(handleChange).toHaveBeenCalledWith([49])
+  })
+
+  it("respects step value", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        step={10}
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(handleChange).toHaveBeenCalledWith([60])
+  })
+
+  it("sets value to min with Home key", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        min={10}
+        max={100}
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{Home}")
+
+    expect(handleChange).toHaveBeenCalledWith([10])
+  })
+
+  it("sets value to max with End key", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        min={0}
+        max={100}
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{End}")
+
+    expect(handleChange).toHaveBeenCalledWith([100])
+  })
+
+  it("does not change value when disabled", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        disabled
+        onValueChange={handleChange}
+      />
+    )
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(handleChange).not.toHaveBeenCalled()
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("Slider accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        aria-label="Volume"
+      />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no violations with range slider", async () => {
+    const { container } = render(
+      <Slider
+        defaultValue={[20, 80]}
+        max={100}
+        aria-label="Faixa de preco"
+      />
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("is focusable", () => {
+    render(<Slider defaultValue={[50]} max={100} />)
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    expect(slider).toHaveFocus()
+  })
+
+  it("supports aria-label", () => {
+    render(
+      <Slider
+        defaultValue={[50]}
+        max={100}
+        aria-label="Ajuste de volume"
+      />
+    )
+    const slider = screen.getByRole("slider")
+    expect(slider).toHaveAttribute("aria-label", "Ajuste de volume")
+  })
+
+  it("vertical slider has correct aria-orientation", () => {
+    render(
+      <Slider
+        defaultValue={[50]}
+        orientation="vertical"
+        aria-label="Vertical slider"
+      />
+    )
+    const slider = screen.getByRole("slider")
+    expect(slider).toHaveAttribute("aria-orientation", "vertical")
+  })
+})
+```
+
+### Testes de Composicao
+
+```tsx
+describe("Slider composition", () => {
+  it("works with controlled value", async () => {
+    const user = userEvent.setup()
+
+    function ControlledSlider() {
+      const [value, setValue] = useState([50])
+      return (
+        <>
+          <Slider value={value} onValueChange={setValue} max={100} />
+          <span data-testid="value">{value[0]}</span>
+        </>
+      )
+    }
+
+    render(<ControlledSlider />)
+
+    const slider = screen.getByRole("slider")
+    slider.focus()
+    await user.keyboard("{ArrowRight}")
+
+    expect(screen.getByTestId("value")).toHaveTextContent("51")
+  })
+
+  it("handles range slider correctly", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[20, 80]}
+        max={100}
+        onValueChange={handleChange}
+      />
+    )
+
+    const sliders = screen.getAllByRole("slider")
+
+    // Mover primeiro thumb
+    sliders[0].focus()
+    await user.keyboard("{ArrowRight}")
+    expect(handleChange).toHaveBeenCalled()
+
+    // Mover segundo thumb
+    sliders[1].focus()
+    await user.keyboard("{ArrowLeft}")
+    expect(handleChange).toHaveBeenCalledTimes(2)
+  })
+
+  it("respects minStepsBetweenThumbs", async () => {
+    const user = userEvent.setup()
+    const handleChange = vi.fn()
+
+    render(
+      <Slider
+        defaultValue={[40, 60]}
+        max={100}
+        step={10}
+        minStepsBetweenThumbs={2}
+        onValueChange={handleChange}
+      />
+    )
+
+    const sliders = screen.getAllByRole("slider")
+
+    // Tentar aproximar thumbs alem do limite
+    sliders[0].focus()
+    await user.keyboard("{ArrowRight}{ArrowRight}{ArrowRight}")
+
+    // Verificar que thumbs mantem distancia minima
+    const lastCall = handleChange.mock.calls[handleChange.mock.calls.length - 1][0]
+    expect(lastCall[1] - lastCall[0]).toBeGreaterThanOrEqual(20)
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+Baseado na analise comparativa com 14 design systems, as seguintes features foram implementadas ou sao candidatas para implementacao futura:
+
+### ✅ Implementado
+
+| Feature | Props | Status |
+|---------|-------|--------|
+| **Marks/Ticks** | `marks` | ✅ Suporte a boolean e array customizado |
+| **Size variants** | `size` | ✅ sm, md, lg |
+| **Color variants** | `color` | ✅ default, primary, success, warning, error |
+| **Label types** | `labelType` | ✅ none, text, tooltip |
+| **Value formatting** | `formatValue` | ✅ Funcao customizada |
+| **Aria valuetext** | `getAriaValueText` | ✅ Acessibilidade aprimorada |
+
+### Prioridade Baixa (Futuro)
+
+#### `thumbContent`
+
+Conteudo customizado dentro do thumb.
+
+```tsx
+// Proposta de API
+interface SliderProps {
+  thumbContent?: ReactNode | ((value: number) => ReactNode)
+}
+
+// Uso
+<Slider
+  thumbContent={(v) => <span className="text-xs">{v}</span>}
+/>
+```
+
+**Referencias:** Mantine (`thumbChildren`), NextUI (via slots)
+
+#### RTL Support
+
+Suporte para layouts right-to-left.
+
+```tsx
+// Proposta de API
+interface SliderProps {
+  dir?: "ltr" | "rtl"
+}
+```
+
+**Referencias:** React Aria, Chakra, MUI, Mantine, AntD, Fluent, Carbon
+
+### Decisoes de Design
+
+| Feature | Status | Justificativa |
+|---------|--------|---------------|
+| `marks` | ✅ Implementado | Alta demanda, melhora UX em steps discretos |
+| `labelType` (tooltip/text) | ✅ Implementado | Essencial para feedback visual durante arrasto |
+| `size` | ✅ Implementado | Consistencia com outros componentes |
+| `color` | ✅ Implementado | Flexibilidade para diferentes contextos semanticos |
+| `getAriaValueText` | ✅ Implementado | Melhora significativa de a11y |
+| `thumbContent` | ⚠️ Futuro | Complexidade vs uso real |
+| RTL | ⚠️ Futuro | Depende do publico-alvo da aplicacao |
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentacao | GitHub |
+|---------------|--------------|--------|
+| **Shadcn/ui** | [Slider](https://ui.shadcn.com/docs/components/slider) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **Radix UI** | [Slider](https://www.radix-ui.com/primitives/docs/components/slider) | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
+| **React Aria** | [Slider](https://react-spectrum.adobe.com/react-aria/Slider.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
+| **Chakra UI** | [Slider](https://chakra-ui.com/docs/components/slider) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **MUI** | [Slider](https://mui.com/material-ui/react-slider/) | [mui/material-ui](https://github.com/mui/material-ui) |
+| **Mantine** | [Slider](https://mantine.dev/core/slider/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [Slider](https://ant.design/components/slider) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **NextUI** | [Slider](https://nextui.org/docs/components/slider) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
+| **Headless UI** | - | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
+| **Ariakit** | - | [ariakit/ariakit](https://github.com/ariakit/ariakit) |
+| **Fluent UI** | [Slider](https://react.fluentui.dev/?path=/docs/components-slider--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Carbon** | [Slider](https://carbondesignsystem.com/components/slider/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **Blueprint** | [Slider](https://blueprintjs.com/docs/#core/components/sliders) | [palantir/blueprint](https://github.com/palantir/blueprint) |
+| **PrimeReact** | [Slider](https://primereact.org/slider/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
+
+### Especificacoes e Padroes
+
+- [WAI-ARIA APG - Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
+- [WAI-ARIA APG - Slider (Multi-Thumb)](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)
+- [WCAG 2.1 Success Criteria](https://www.w3.org/WAI/WCAG21/quickref/)
+- [MDN - input type="range"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
+
+### Ferramentas Utilizadas
+
+- [Radix Slider](https://www.radix-ui.com/primitives/docs/components/slider)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+- [Lucide Icons](https://lucide.dev/icons/)