# Slider

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente de controle deslizante para seleção de valores numéricos dentro de um intervalo definido. Suporta modo simples (um valor) e modo de intervalo (dois valores: início e fim). Implementa `ControlValueAccessor` para integração com Angular Forms.

## Quando usar

- Seleção de um valor dentro de um intervalo contínuo (volume, brilho, porcentagem)
- Filtros de faixa de valores (faixa de preço, temperatura, população)
- Controles onde a posição relativa é mais relevante que o valor exato

## Quando não usar

- Entrada de valores numéricos precisos — prefira `NumberInput` com campo de texto
- Intervalos com muitos passos discretos onde a precisão é crítica — prefira um campo com máscara numérica
- Valores que não se encaixam em uma progressão linear

## Instalação

```typescript
import { SliderModule } from '@seniorsistemas/angular-components/slider';

@NgModule({ imports: [SliderModule] })
export class MeuModule {}
```

## Uso básico

```html
<!-- Slider simples -->
<s-slider formControlName="volume" [min]="0" [max]="100" [step]="5" />

<!-- Slider de intervalo -->
<s-slider formControlName="faixa" [multiple]="true" [min]="0" [max]="1000" />
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `value` | `number \| [number, number]` | `0` | Não | Valor atual. No modo range é `[inicio, fim]` |
| `multiple` | `boolean` | `false` | Não | Habilita modo de intervalo (dois thumbs) |
| `min` | `number` | `0` | Não | Valor mínimo do intervalo |
| `max` | `number` | `100` | Não | Valor máximo do intervalo |
| `step` | `number` | `1` | Não | Incremento aplicado a cada movimento do thumb |
| `minValueLabel` | `string` | `undefined` | Não | Label exibido abaixo do valor mínimo |
| `maxValueLabel` | `string` | `undefined` | Não | Label exibido abaixo do valor máximo |
| `disabled` | `boolean` | `false` | Não | Desabilita a interação do usuário |
| `hiddenThumb` | `boolean` | `false` | Não | Oculta visualmente o thumb (exibe apenas a barra de progresso) |
| `tabindex` | `number` | `0` | Não | Ordem de tabulação do elemento |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `valueChange` | `EventEmitter<number \| [number, number]>` | Emitido quando o valor é alterado pelo usuário |

## Exemplos

### Slider simples com labels

```html
<s-slider
  [(ngModel)]="populacao"
  [min]="0"
  [max]="220"
  [step]="5"
  minValueLabel="0M"
  maxValueLabel="220M"
  (valueChange)="onMudanca($event)"
></s-slider>
```

### Slider de intervalo

```html
<s-slider
  [(ngModel)]="faixaTemperatura"
  [multiple]="true"
  [min]="-20"
  [max]="50"
  [step]="1"
  minValueLabel="-20°C"
  maxValueLabel="50°C"
></s-slider>
```

### Integração com Reactive Forms

```html
<form [formGroup]="form">
  <s-slider
    formControlName="desconto"
    [min]="0"
    [max]="100"
    [step]="5"
    minValueLabel="0%"
    maxValueLabel="100%"
  ></s-slider>
</form>
```

### Slider desabilitado (somente leitura)

```html
<s-slider [value]="45" [min]="0" [max]="100" [disabled]="true"></s-slider>
```

### Apenas barra de progresso (sem thumb)

```html
<s-slider [value]="65" [min]="0" [max]="100" [hiddenThumb]="true"></s-slider>
```

## Acessibilidade

- Navegação por teclado: `ArrowLeft`/`ArrowRight` para decrementar/incrementar o valor em `step` unidades
- No modo de intervalo (`multiple`), as setas movem o intervalo inteiro mantendo a largura
- O atributo `tabindex` controla a ordem de tabulação
- Tooltips sobre os thumbs exibem os valores atuais visualmente

## Componentes relacionados

- [`NumberInput`](../number-input/README.md) — entrada numérica precisa com campo de texto