Cursore

Questo è un vero <input type="range"> — i tasti freccia, Home e Fine, e l’annuncio corretto arrivano tutti dal browser. Sono stilizzati soltanto la barra e il cursore.

Cursore di base

Qualità

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

Intervallo e passo

Volume

Colonne

Scala

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

Mostrare il valore

showValue mette accanto alla barra un <output> che porta il valore con cui la pagina è stata costruita, e l’input si va a prendere il proprio handler al primo trascinamento, così il numero segue il cursore. Non c’è niente da importare: un valore che diventasse obsoleto in silenzio sarebbe peggio di nessun valore, quindi questo non è lasciato a te.

Qualità delle immagini

Più alta significa file più grandi e build più lente.

sliderField({
  label: 'Qualità delle immagini',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Più alta significa file più grandi e build più lente.',
})

Impostarlo dal tuo codice

Un cursore è un controllo di form, quindi appartiene a chi legge — ma un valore predefinito, un pulsante di ripristino o un valore che arriva dalla rete devono comunque poterlo muovere. Dagli un id e setSlider lo fa, portandosi dietro l’<output>.

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

setSlider('volume', 50)

Oppure raggiungi il modulo come lo raggiungono i componenti, e salta del tutto il bundle:

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

Il browser riporta il valore fra min e max e lo aggancia a step, quindi quello che torna è dove il cursore è atterrato più che quello che gli è stato passato. Seguono input e change, perché un’anteprima in ascolto del trascinamento non ha altro modo di accorgersi di uno spostamento che non ha causato lei. getSlider() rilegge il valore.

Provalo

Questa pagina carica il runtime, quindi i pulsanti qui sotto muovono davvero il cursore.

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))" }, 'Min'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',50))" }, 'Metà'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',100))" }, 'Max'),
  ),
)

Colori

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' }),
)

Disattivato

Bloccato

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

Senza etichetta

Un slider() nudo è il solo controllo — dagli un aria-label quando non c’è un’etichetta visibile che lo indichi.

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

In un form

Larghezza massima delle immagini

1280

Qualità

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Larghezza massima delle immagini', name: 'max-width', min: 640, max: 2560, step: 160, value: 1280, showValue: true }),
      sliderField({ label: 'Qualità', name: 'q', min: 40, max: 100, value: 82, showValue: true }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Salva'),
  ),
)

Props

Prop	Tipo	Predefinito	Descrizione
`min`	`number \| string`	`0`	Limite inferiore.
`max`	`number \| string`	`100`	Limite superiore.
`step`	`number \| string`	—	Incremento. Omettilo per il predefinito del browser, che è 1.
`value`	`number \| string`	—	Valore iniziale.
`showValue`	`boolean`	`false`	Aggiunge un <output> con il valore della build.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Colore del cursore.
`name`	`string`	—	Nome del campo del form; da esso si ricava l’id.
`disabled`	`boolean`	`false`	Disattiva il controllo.

sliderField() accetta in più label, help, error e required — vedi textField().