Cursor

Isto é um <input type="range"> a sério — as setas, o Home e o End, e o anúncio correto vêm todos do navegador. Só a calha e o puxador é que são estilizados.

Cursor básico

Qualidade

sliderField({ label: 'Qualidade', name: 'quality', value: 70 })

Intervalo e passo

Volume

Colunas

Escala

stack({ gap: 'lg' },
  sliderField({ label: 'Volume', name: 'volume', min: 0, max: 100, value: 40 }),
  sliderField({ label: 'Colunas', name: 'columns', min: 1, max: 6, step: 1, value: 3 }),
  sliderField({ label: 'Escala', name: 'scale', min: 0.5, max: 2, step: 0.25, value: 1 }),
)

Mostrar o valor

showValue põe um <output> ao lado da calha com o valor com que a página foi construída, e o input vai buscar o seu próprio handler no primeiro arrasto, por isso o número segue o puxador. Não há nada a importar: um número que ficasse desatualizado em silêncio seria pior do que número nenhum, por isso este não fica para ti.

Qualidade da imagem

Mais alto é maior e mais lento a construir.

sliderField({
  label: 'Qualidade da imagem',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Mais alto é maior e mais lento a construir.',
})

Defini-lo a partir do teu código

Um cursor é um controlo de formulário, por isso é do leitor — mas uma predefinição, um botão de reposição ou um valor que chega pela rede têm de o conseguir mover na mesma. Dá-lhe um id e o setSlider fá-lo, levando o <output> atrás.

import { setSlider } from 'sitelo/ui/client'

setSlider('volume', 50)

Ou vai buscar o módulo como os componentes vão buscar o deles, e salta o bundle por completo:

button({ onclick: "import('/su/slider.js').then(m=>m.set('volume',50))" }, 'Metade')

O browser limita a min e max e encaixa no step, por isso o que volta é onde o cursor ficou, não o que lhe foi dado. A seguir vêm input e change, porque uma pré-visualização à escuta do arrasto não tem outra forma de saber de um movimento que não causou. O getSlider() lê o valor de volta.

Experimenta

Esta página carrega o runtime, por isso os botões abaixo movem mesmo o cursor.

stack({ gap: 'md' },
  slider({ id: 'demo-slider', value: 40, showValue: true, 'aria-label': 'Demo' }),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',0))" }, 'Mín'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',50))" }, 'Metade'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',100))" }, 'Máx'),
  ),
)

Cores

stack({ gap: 'lg' },
  slider({ value: 70, color: 'primary', 'aria-label': 'Primary' }),
  slider({ value: 55, color: 'success', 'aria-label': 'Success' }),
  slider({ value: 35, color: 'warning', 'aria-label': 'Warning' }),
  slider({ value: 20, color: 'danger', 'aria-label': 'Danger' }),
)

Desativado

Bloqueado

sliderField({ label: 'Bloqueado', name: 'locked', value: 50, disabled: true })

Sem etiqueta

Um slider() nu é o controlo sozinho — dá-lhe um aria-label quando não houver uma etiqueta visível a apontar para ele.

stack({ direction: 'row', gap: 'md', align: 'center' },
  text({ variant: 'small', tone: 'muted' }, 'Aa'),
  slider({ min: 12, max: 24, value: 16, 'aria-label': 'Tamanho do texto' }),
  text({ tone: 'muted' }, 'Aa'),
)

Num formulário

Largura máxima da imagem

1280

Qualidade

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Largura máxima da imagem', name: 'max-width', min: 640, max: 2560, step: 160, value: 1280, showValue: true }),
      sliderField({ label: 'Qualidade', name: 'q', min: 40, max: 100, value: 82, showValue: true }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Guardar'),
  ),
)

Props

Prop	Tipo	Predefinição	Descrição
`min`	`number \| string`	`0`	Limite inferior.
`max`	`number \| string`	`100`	Limite superior.
`step`	`number \| string`	—	Incremento. Omite-o para a predefinição do navegador, 1.
`value`	`number \| string`	—	Valor inicial.
`showValue`	`boolean`	`false`	Acrescenta um <output> com o valor da construção.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Cor do puxador.
`name`	`string`	—	Nome do campo; o id é derivado dele.
`disabled`	`boolean`	`false`	Desativa o controlo.

sliderField() aceita ainda label, help, error e required — vê textField().