Slider

Das ist ein echtes <input type="range"> — Pfeiltasten, Pos1 und Ende sowie die richtige Ansage kommen alle vom Browser. Gestaltet sind nur Schiene und Griff.

Einfacher Slider

Qualität

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

Bereich und Schrittweite

Lautstärke

Spalten

Skalierung

stack({ gap: 'lg' },
  sliderField({ label: 'Lautstärke', name: 'volume', min: 0, max: 100, value: 40 }),
  sliderField({ label: 'Spalten', name: 'columns', min: 1, max: 6, step: 1, value: 3 }),
  sliderField({ label: 'Skalierung', name: 'scale', min: 0.5, max: 2, step: 0.25, value: 1 }),
)

Den Wert zeigen

showValue setzt neben die Schiene ein <output> mit dem Wert, mit dem die Seite gebaut wurde, und das Input holt sich beim ersten Ziehen seinen eigenen Handler, sodass die Zahl dem Griff folgt. Es gibt nichts zu importieren: eine Zahl, die still veraltet, wäre schlimmer als gar keine Zahl, also bleibt diese nicht dir überlassen.

Bildqualität

Höher heißt größer und langsamer im Build.

sliderField({
  label: 'Bildqualität',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Höher heißt größer und langsamer im Build.',
})

Von eigenem Code aus setzen

Ein Slider ist ein Formularelement, gehört also dem Leser — aber ein Preset, ein Zurücksetzen-Button oder ein Wert, der übers Netz kommt, muss ihn trotzdem bewegen können. Gib ihm eine id, und setSlider tut genau das, samt <output> daneben.

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

setSlider('volume', 50)

Oder hol das Modul so, wie die Komponenten ihres holen, und lass das Bundle ganz weg:

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

Der Browser begrenzt auf min und max und rastet auf step ein; zurück kommt deshalb, wo der Slider gelandet ist, nicht was er bekommen hat. input und change folgen, denn eine Vorschau, die auf das Ziehen hört, erfährt sonst nichts von einer Bewegung, die sie nicht ausgelöst hat. getSlider() liest den Wert zurück.

Ausprobieren

Diese Seite lädt die Runtime, die Buttons unten bewegen den Slider also wirklich.

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

Farben

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

Deaktiviert

Gesperrt

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

Ohne Label

Ein nacktes slider() ist das Bedienelement für sich — gib ihm ein aria-label, wenn kein sichtbares Label darauf zeigt.

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

In einem Formular

Maximale Bildbreite

1280

Qualität

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Maximale Bildbreite', name: 'max-width', min: 640, max: 2560, step: 160, value: 1280, showValue: true }),
      sliderField({ label: 'Qualität', name: 'q', min: 40, max: 100, value: 82, showValue: true }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Speichern'),
  ),
)

Props

Prop	Typ	Standard	Beschreibung
`min`	`number \| string`	`0`	Untere Grenze.
`max`	`number \| string`	`100`	Obere Grenze.
`step`	`number \| string`	—	Schrittweite. Weglassen für den Browser-Standard 1.
`value`	`number \| string`	—	Startwert.
`showValue`	`boolean`	`false`	Fügt ein <output> mit dem Wert aus der Build-Zeit hinzu.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Farbe des Griffs.
`name`	`string`	—	Name des Formularfelds; die id wird daraus abgeleitet.
`disabled`	`boolean`	`false`	Deaktiviert das Bedienelement.

sliderField() nimmt zusätzlich label, help, error und required — siehe textField().