Slider для выбора значения

Компонент Slider в библиотеке Carbon Components Svelte предназначен для выбора числового значения в заданном диапазоне с помощью ползунка. Он может быть использован как для одиночного значения, так и для диапазона значений. Slider обеспечивает высокий уровень кастомизации и интеграцию с другими компонентами интерфейса.

Импорт и базовое использование

Для подключения Slider необходимо импортировать компонент из пакета carbon-components-svelte:

<script>
  import { Slider } from 'carbon-components-svelte';
  let value = 50;
</script>

<Slider
  bind:value
  min={0}
  max={100}
  step={1}
  label="Выберите значение"
/>
  • bind:value — двусторонняя привязка значения ползунка к переменной.
  • min и max — минимальное и максимальное значения диапазона.
  • step — шаг изменения значения при перемещении ползунка.
  • label — текстовая метка, поясняющая назначение ползунка.

Настройка диапазона и шагов

Slider позволяет гибко управлять диапазоном и точностью:

<Slider
  bind:value
  min={0}
  max={500}
  step={5}
  label="Выберите количество"
/>
  • Установка step позволяет ограничить возможные значения конкретными интервалами.
  • Диапазон может быть расширен до любых чисел, включая отрицательные, если это требуется логикой приложения.

Вертикальный и горизонтальный ползунок

Компонент поддерживает ориентацию по горизонтали и вертикали:

<Slider
  bind:value
  min={0}
  max={100}
  orientation="vertical"
  label="Вертикальный ползунок"
/>
  • Параметр orientation принимает значения "horizontal" (по умолчанию) и "vertical".
  • Вертикальный ползунок удобно использовать в панелях управления или при ограниченном горизонтальном пространстве.

Использование диапазона значений

Slider может работать с диапазоном, когда необходимо выбрать два значения одновременно (например, минимальное и максимальное):

<script>
  let range = [20, 80];
</script>

<Slider
  bind:value={range}
  min={0}
  max={100}
  step={1}
  label="Выберите диапазон"
/>
  • В этом случае value — массив из двух чисел.
  • Интерфейс отображает два ползунка и визуальную полоску между ними.

Стилизация и кастомизация

Carbon Components Svelte позволяет кастомизировать визуальное представление Slider:

  • light — светлая тема, используется на тёмном фоне.
  • disabled — блокировка ползунка, предотвращающая взаимодействие.
  • invalid — визуально сигнализирует о недопустимом значении.

Пример:

<Slider
  bind:value
  min={0}
  max={100}
  label="Недоступный ползунок"
  disabled
/>

Реакция на события

Slider поддерживает стандартные события Svelte:

  • on:change — срабатывает при завершении перемещения ползунка.
  • on:input — срабатывает при каждом изменении значения.
<Slider
  bind:value
  min={0}
  max={100}
  label="События"
  on:input={(e) => console.log("Текущее значение:", e.detail)}
  on:change={(e) => console.log("Завершено:", e.detail)}
/>
  • e.detail содержит текущее значение ползунка или массив значений при диапазоне.

Интеграция с формами

Slider можно использовать внутри формы для отправки выбранного значения на сервер или его привязки к состоянию приложения:

<form on:submit|preventDefault={() => console.log(value)}>
  <Slider bind:value min={0} max={100} label="Оценка" />
  <button type="submit">Отправить</button>
</form>
  • Применение bind:value позволяет автоматически синхронизировать состояние формы с ползунком.
  • preventDefault предотвращает стандартное поведение формы и позволяет обрабатывать данные в приложении.

Рекомендации по UX

  • Использовать шаг step соответствующий логике приложения, чтобы избежать ненужной точности.
  • Для диапазонов значений визуально выделять активную область между ползунками.
  • При вертикальном расположении предоставлять достаточный отступ для удобного взаимодействия.
  • При больших диапазонах значений добавлять подписи для крайних точек и, при необходимости, промежуточные метки.

Продвинутая кастомизация с CSS

Carbon Components Svelte предоставляет переменные CSS для тонкой настройки внешнего вида Slider:

:global(.bx--slider__thumb) {
  background-color: #0f62fe;
  border: 2px solid #0043ce;
}

:global(.bx--slider__track) {
  height: 6px;
  background-color: #c6c6c6;
}
  • **bx–slider__thumb** — стилизация ползунка.
  • **bx–slider__track** — стилизация полосы шкалы.
  • Использование :global необходимо, чтобы стили применялись к компонентам Carbon.

Вывод

Slider в Carbon Components Svelte сочетает в себе простоту настройки, гибкость и интеграцию с Svelte. Он поддерживает одиночные и диапазонные значения, горизонтальную и вертикальную ориентацию, события изменения значения, доступность и кастомизацию стиля через CSS. Такой компонент идеально подходит для управления числовыми данными в интерфейсе, где важна точность и удобство взаимодействия.

Оглавление