Слайдер

Это настоящий <input type="range">: стрелки, Home и End и правильное объявление достаются от браузера. Оформлены только дорожка и бегунок.

Простой слайдер

Качество

sliderField({ label: 'Качество', name: 'quality', value: 70 })

Диапазон и шаг

Громкость

Колонки

Масштаб

stack({ gap: 'lg' },
  sliderField({ label: 'Громкость', name: 'volume', min: 0, max: 100, value: 40 }),
  sliderField({ label: 'Колонки', name: 'columns', min: 1, max: 6, step: 1, value: 3 }),
  sliderField({ label: 'Масштаб', name: 'scale', min: 0.5, max: 2, step: 0.25, value: 1 }),
)

Показ значения

showValue ставит рядом с дорожкой <output> со значением, с которым собиралась страница, а сам инпут при первом же перетаскивании подтягивает свой обработчик — так что число идёт за бегунком. Импортировать нечего: число, которое тихо устареет, было бы хуже, чем никакого числа, поэтому это на вас не оставили.

Качество изображения

Чем выше, тем больше вес и медленнее сборка.

sliderField({
  label: 'Качество изображения',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Чем выше, тем больше вес и медленнее сборка.',
})

Задать из своего кода

Слайдер — элемент формы, и он принадлежит читателю, но пресет, кнопка сброса или пришедшее по сети значение всё равно должны уметь его двигать. Дайте ему id — и setSlider сдвинет его вместе с <output> рядом.

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

setSlider('volume', 50)

Или возьмите модуль так же, как его берут сами компоненты, и обойдитесь без сборки:

button({ onclick: "import('/su/slider.js').then(m=>m.set('volume',50))" }, 'Половина')

Браузер обрежет по min и max и подтянет к step, поэтому возвращается то, где слайдер оказался, а не то, что ему передали. Следом идут input и change: предпросмотру, который слушает перетаскивание, иначе неоткуда узнать о движении, которого он не вызывал. getSlider() читает значение обратно.

Попробуйте

Эта страница подгружает рантайм, так что кнопки ниже действительно двигают слайдер.

stack({ gap: 'md' },
  slider({ id: 'demo-slider', value: 40, showValue: true, 'aria-label': 'Демо' }),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',0))" }, 'Мин'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',50))" }, 'Половина'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',100))" }, 'Макс'),
  ),
)

Цвета

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

Отключён

Заблокировано

sliderField({ label: 'Заблокировано', name: 'locked', value: 50, disabled: true })

Без подписи

Голый slider() — это сам элемент управления: дайте ему aria-label, когда на него не указывает видимая подпись.

stack({ direction: 'row', gap: 'md', align: 'center' },
  text({ variant: 'small', tone: 'muted' }, 'Aa'),
  slider({ min: 12, max: 24, value: 16, 'aria-label': 'Размер текста' }),
  text({ tone: 'muted' }, 'Aa'),
)

В форме

Максимальная ширина картинки

1280

Качество

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Максимальная ширина картинки', name: 'max-width', min: 640, max: 2560, step: 160, value: 1280, showValue: true }),
      sliderField({ label: 'Качество', name: 'q', min: 40, max: 100, value: 82, showValue: true }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Сохранить'),
  ),
)

Пропсы

Проп	Тип	По умолчанию	Описание
`min`	`number \| string`	`0`	Нижняя граница.
`max`	`number \| string`	`100`	Верхняя граница.
`step`	`number \| string`	—	Шаг. Опустите, чтобы взять браузерное значение 1.
`value`	`number \| string`	—	Начальное значение.
`showValue`	`boolean`	`false`	Добавляет <output> со значением из сборки.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Цвет бегунка.
`name`	`string`	—	Имя поля формы; из него выводится id.
`disabled`	`boolean`	`false`	Отключает элемент.

sliderField() дополнительно принимает label, help, error и required — см. textField().