Curseur

C’est un vrai <input type="range"> — les flèches, Origine et Fin, et l’annonce correcte viennent toutes du navigateur. Seuls la piste et le curseur sont stylés.

Curseur de base

Qualité

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

Plage et pas

Volume

Colonnes

Échelle

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

Afficher la valeur

showValue place un <output> à côté de la piste, portant la valeur avec laquelle la page a été construite, et l’input va chercher son propre gestionnaire au premier glissement : le nombre suit donc le curseur. Rien à importer — un nombre qui se périmerait en silence serait pire que pas de nombre du tout, alors celui-là ne vous est pas laissé.

Qualité d’image

Plus haut, c’est plus lourd et plus lent à construire.

sliderField({
  label: 'Qualité d’image',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Plus haut, c’est plus lourd et plus lent à construire.',
})

Le régler depuis votre propre code

Un curseur est un contrôle de formulaire : il appartient au lecteur — mais un préréglage, un bouton de remise à zéro ou une valeur arrivée par le réseau doivent tout de même pouvoir le déplacer. Donnez-lui un id et setSlider s’en charge, en emmenant l’<output> avec lui.

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

setSlider('volume', 50)

Ou allez chercher le module comme les composants vont chercher le leur, et évitez le bundle :

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

Le navigateur borne à min et max et aligne sur step : ce qui revient est donc là où le curseur s’est posé, pas ce qu’on lui a donné. input et change suivent, car un aperçu à l’écoute du glissement n’a aucun autre moyen d’apprendre un déplacement qu’il n’a pas provoqué. getSlider() relit la valeur.

Essayez

Cette page charge le runtime : les boutons ci-dessous déplacent vraiment le curseur.

stack({ gap: 'md' },
  slider({ id: 'demo-slider', value: 40, showValue: true, 'aria-label': 'Démo' }),
  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))" }, 'Moitié'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',100))" }, 'Max'),
  ),
)

Couleurs

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

Désactivé

Verrouillé

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

Sans libellé

Un slider() nu, c’est le contrôle tout seul — donnez-lui un aria-label quand aucun libellé visible ne le désigne.

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

Dans un formulaire

Largeur d’image maximale

1280

Qualité

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Largeur d’image maximale', 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' }, 'Enregistrer'),
  ),
)

Props

Prop	Type	Défaut	Description
`min`	`number \| string`	`0`	Borne inférieure.
`max`	`number \| string`	`100`	Borne supérieure.
`step`	`number \| string`	—	Incrément. Omettez-le pour le défaut du navigateur, 1.
`value`	`number \| string`	—	Valeur initiale.
`showValue`	`boolean`	`false`	Ajoute un <output> avec la valeur du build.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Couleur du curseur.
`name`	`string`	—	Nom du champ ; l’id en découle.
`disabled`	`boolean`	`false`	Désactive le contrôle.

sliderField() prend en plus label, help, error et required — voir textField().