Formulário

Slider

Escolha um valor numa escala com marcas. Arraste, clique ou use o teclado, e ele encaixa na marca.

data-u="slider"

Exemplo

<div data-u="slider" data-u-props='{
  "min": 0,
  "max": 4,
  "value": 1,
  "label": "Esforço",
  "left": "Mais rápido",
  "right": "Mais inteligente",
  "texts": ["Mínimo", "Baixo", "Médio", "Alto", "Máximo"]
}'></div>

Instalação

Slider vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa slider:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-models

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Vão em data-u-props, como JSON.

Prop	Tipo	Padrão	O que faz
`min`	number	0	Menor valor.
`max`	number	4	Maior valor.
`step`	number	1	Passo entre as marcas. Cada passo ganha uma marca na trilha.
`value`	number	min	Valor inicial.
`label`	string	sem padrão	Nome da trilha (`aria-label`).
`left`	string	sem padrão	Texto da ponta esquerda.
`right`	string	sem padrão	Texto da ponta direita.
`texts`	array	sem padrão	Um texto por posição. Vira o `aria-valuetext` e vai no evento.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
trilha	`role="slider"`, `tabindex="0"`	A trilha recebe o foco.
trilha	`aria-valuemin`, `aria-valuemax`, `aria-valuenow`	Limites e valor atual.
trilha	`aria-valuetext`	O texto da posição (de texts) ou o número.

Teclado

Tecla	Faz
Seta para a direita ou para cima	sobe um passo
Seta para a esquerda ou para baixo	desce um passo
Home	vai pro mínimo
End	vai pro máximo

Eventos e API

Evento	detail	Quando
`u:change`	`{ value, text }`	Quando o valor muda, por arrasto, clique ou teclado.

Todo evento sobe pela página (bubbles). Escute no próprio elemento: el.addEventListener("u:change", (e) => e.detail).

el._u.value lê o valor atual.