Suwak

To prawdziwy <input type="range"> — strzałki, Home i End oraz poprawne zapowiadanie pochodzą od przeglądarki. Ostylowane są tylko tor i uchwyt.

Podstawowy suwak

Jakość

sliderField({ label: 'Jakość', name: 'quality', value: 70 })

Zakres i krok

Głośność

Kolumny

Skala

stack({ gap: 'lg' },
  sliderField({ label: 'Głośność', name: 'volume', min: 0, max: 100, value: 40 }),
  sliderField({ label: 'Kolumny', name: 'columns', min: 1, max: 6, step: 1, value: 3 }),
  sliderField({ label: 'Skala', name: 'scale', min: 0.5, max: 2, step: 0.25, value: 1 }),
)

Pokazywanie wartości

showValue stawia obok toru element <output> niosący wartość, z którą strona została zbudowana, a pole samo pobiera swój handler przy pierwszym przeciągnięciu, więc liczba idzie za uchwytem. Nie ma czego importować: wartość, która po cichu stałaby się nieaktualna, byłaby gorsza niż jej brak, więc tego akurat nie zostawiono Tobie.

Jakość obrazów

Wyżej znaczy większe pliki i wolniejszy build.

sliderField({
  label: 'Jakość obrazów',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Wyżej znaczy większe pliki i wolniejszy build.',
})

Ustawianie z własnego kodu

Suwak to kontrolka formularza, więc należy do czytającego — ale ustawienie wstępne, przycisk resetu albo wartość przychodząca z sieci nadal muszą móc nim ruszyć. Daj mu id, a setSlider to zrobi, zabierając ze sobą <output>.

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

setSlider('volume', 50)

Albo sięgnij po moduł tak, jak sięgają po swoje komponenty, i pomiń paczkę całkowicie:

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

Przeglądarka przycina wartość do min i max oraz przyciąga ją do step, więc to, co wraca, jest miejscem, w którym suwak wylądował, a nie tym, co mu podano. Idą za tym zdarzenia input i change, bo podgląd nasłuchujący przeciągnięcia nie ma innego sposobu, żeby usłyszeć ruch, którego sam nie wywołał. getSlider() odczytuje wartość z powrotem.

Spróbuj

Ta strona ładuje runtime, więc przyciski poniżej naprawdę ruszają suwakiem.

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

Kolory

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

Wyłączony

Zablokowany

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

Bez etykiety

Goły slider() to sama kontrolka — daj mu aria-label, gdy nie ma widocznej etykiety, która by go wskazywała.

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

W formularzu

Maksymalna szerokość obrazów

1280

Jakość

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Maksymalna szerokość obrazów', name: 'max-width', min: 640, max: 2560, step: 160, value: 1280, showValue: true }),
      sliderField({ label: 'Jakość', name: 'q', min: 40, max: 100, value: 82, showValue: true }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Zapisz'),
  ),
)

Propsy

Prop	Typ	Domyślnie	Opis
`min`	`number \| string`	`0`	Dolna granica.
`max`	`number \| string`	`100`	Górna granica.
`step`	`number \| string`	—	Przyrost. Pomiń dla domyślnego 1 z przeglądarki.
`value`	`number \| string`	—	Wartość początkowa.
`showValue`	`boolean`	`false`	Dodaje <output> z wartością z buildu.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Kolor uchwytu.
`name`	`string`	—	Nazwa pola formularza; z niej wyprowadzany jest id.
`disabled`	`boolean`	`false`	Wyłącza kontrolkę.

sliderField() przyjmuje dodatkowo label, help, error i required — zobacz textField().