Slider

O mk-slider reimplementa a interação de um range slider do zero — sem <input type="range"> por baixo — como um controle form-associated que suporta valor único ou faixa de dois thumbs, orientação horizontal ou vertical, marcações de passo opcionais, tooltip de valor durante a interação, e botões de incremento/decremento. É a base recomendada para filtros de faixa (preço, distância), ajustes de configuração (volume, brilho) e qualquer contexto que hoje usaria um <input type="range"> cru.

Quando usar

• O usuário precisa ajustar um valor numérico dentro de um intervalo conhecido de forma direta e visual.
• É necessário selecionar uma faixa de valores (ex.: preço mínimo e máximo) com dois limites independentes.
• O ajuste se beneficia de feedback contínuo em tempo real (arraste) e de um valor confirmado ao soltar.

• O usuário precisa digitar um valor exato com frequência — use mk-input-number.
• A escolha é entre poucas opções discretas sem relação de intervalo — use mk-select ou mk-radio.

Padrão

import { MkSlider } from '@db1/makuco-ui-react';

<MkSlider label="Volume" value={40} />

<mk-slider label="Volume" [value]="40"></mk-slider>

Faixa (dois thumbs)

Quando value recebe um array de dois números, o componente entra em modo faixa: dois thumbs independentes, um para o valor mínimo e outro para o máximo. O thumb inferior nunca ultrapassa o superior, e vice-versa.

<MkSlider label="Faixa de preço" value={[20, 80]} />

<mk-slider label="Faixa de preço" [value]="[20, 80]"></mk-slider>

Orientação vertical

Em orientation="vertical", o consumidor deve definir a altura do host via CSS — diretamente ou pela custom property --mk-slider-block-size. Sem isso, o slider colapsa para altura zero.

<div style={{ blockSize: '200px' }}>
  <MkSlider
    label="Volume"
    orientation="vertical"
    value={40}
    style={{ '--mk-slider-block-size': '200px' }}
  />
</div>

<div style="block-size: 200px">
  <mk-slider
    label="Volume"
    orientation="vertical"
    [value]="40"
    style="--mk-slider-block-size: 200px"
  ></mk-slider>
</div>

Marcações

marks exibe uma marcação em cada múltiplo de step; markLabels adiciona o valor numérico sob cada marcação (sem efeito se marks for false).

<MkSlider label="Nível" min={0} max={50} step={10} marks markLabels value={20} />

<mk-slider
  label="Nível"
  [min]="0"
  [max]="50"
  [step]="10"
  marks
  mark-labels
  [value]="20"
></mk-slider>

Ícones de passo

icons exibe botões de decremento/incremento que ajustam em step o thumb ativo (o último focado, ou o inferior quando nenhum foi focado ainda).

<MkSlider label="Zoom" icons value={40} />

<mk-slider label="Zoom" icons [value]="40"></mk-slider>

Desabilitado

Em disabled, o tooltip de valor permanece sempre visível — é a única forma de comunicar o valor de um slider que não pode ser interagido.

<MkSlider label="Volume" disabled value={40} />

<mk-slider label="Volume" [disabled]="true" [value]="40"></mk-slider>

Formulários

O mk-slider é form-associated: em modo valor único, envia o número sob name; em modo faixa, envia os dois valores sob o mesmo name (equivalente a múltiplos campos com o mesmo nome).

<form onSubmit={handleSubmit}>
  <MkSlider label="Faixa de preço" name="preco" value={[20, 80]} />
  <MkButton type="submit">Enviar</MkButton>
</form>

<form (ngSubmit)="handleSubmit()">
  <mk-slider label="Faixa de preço" name="preco" [value]="[20, 80]"></mk-slider>
  <mk-button type="submit">Enviar</mk-button>
</form>

Exemplo completo

Um único mk-slider combinando todas as props do componente — faixa de dois thumbs, cor success, tamanho sm, marcações com rótulos, ícones de passo, rótulos de limite, tooltip de valor e integração com formulário via name.

import { MkSlider } from '@db1/makuco-ui-react';

<MkSlider
  label="Faixa de preço completa"
  name="faixa-completa"
  value={[30, 70]}
  min={0}
  max={100}
  step={5}
  color="success"
  size="sm"
  orientation="horizontal"
  marks
  markLabels
  bounds
  valueLabel
  icons
  disabled={false}
/>

<mk-slider
  label="Faixa de preço completa"
  name="faixa-completa"
  [value]="[30, 70]"
  [min]="0"
  [max]="100"
  [step]="5"
  color="success"
  size="sm"
  orientation="horizontal"
  marks
  mark-labels
  bounds
  value-label
  icons
  [disabled]="false"
></mk-slider>

Props

Eventos

Acessibilidade

• Cada thumb é um elemento independente com role="slider", aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext e aria-orientation.
• Em modo faixa, cada thumb expõe aria-valuemin/aria-valuemax relativos ao thumb vizinho (nunca podem se cruzar) e um aria-label que identifica a extremidade ("Valor mínimo" / "Valor máximo").
• aria-disabled="true" é definido quando disabled; o thumb sai da ordem de tabulação (tabindex="-1").
• O tooltip de valor é puramente visual e leva aria-hidden="true" — o valor já é anunciado via aria-valuenow/aria-valuetext no próprio thumb.
• O componente é form-associated via ElementInternals API.