Компонент Slider

Компонент Slider в SvelteKit UI предназначен для интерактивного выбора числового значения из заданного диапазона. Он сочетает визуальное представление с возможностью программного контроля через состояние Svelte. Slider часто используется для регулировки громкости, выбора цены, диапазонов дат или других числовых параметров.

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

Для использования Slider необходимо импортировать компонент из библиотеки UI:

<script>
  import { Slider } from 'sveltekit-ui';
  let value = 50;
</script>

<Slider bind:value min={0} max={100} step={1} />
<p>Текущее значение: {value}</p>

Ключевые моменты:

  • bind:value — связывает значение с переменной Svelte. Любое изменение слайдера автоматически обновляет переменную.
  • min и max — границы диапазона.
  • step — шаг изменения значения, полезен для дискретных выборов.

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

Слайдер в SvelteKit UI можно настраивать с помощью пропсов и классов:

<Slider 
  bind:value={volume} 
  min={0} 
  max={100} 
  step={5} 
  trackColor="blue" 
  thumbColor="red" 
/>
  • trackColor — цвет дорожки, по которой движется ползунок.
  • thumbColor — цвет ползунка (ручки слайдера).
  • size — опциональный проп для изменения толщины и размеров ползунка ('sm' | 'md' | 'lg').

Визуальная кастомизация позволяет легко интегрировать компонент в дизайн-платформу проекта.

Дискретные и диапазонные значения

Slider поддерживает как дискретные значения, так и диапазонные (range):

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

<Slider bind:value={range} range min={0} max={100} step={5} />
<p>Выбранный диапазон: {range[0]} - {range[1]}</p>
  • Установка range в true превращает слайдер в диапазон с двумя ползунками.
  • Массив значений [minValue, maxValue] используется для двустороннего биндинга.

События компонента

Компонент Slider генерирует несколько событий для интеграции с логикой приложения:

  • on:input — вызывается при каждом изменении положения ползунка.
  • on:change — вызывается при завершении изменения, например, при отпускании мыши.
  • on:focus / on:blur — для отслеживания фокуса элемента, важно для клавиатурного управления.

Пример использования событий:

<Slider 
  bind:value={volume} 
  min={0} 
  max={100} 
  step={1} 
  on:input={(e) => console.log('Изменение:', e.detail)}
  on:change={(e) => console.log('Окончательное значение:', e.detail)}
/>

Клавиатурная и сенсорная поддержка

Slider полностью поддерживает управление с клавиатуры:

  • Стрелки ← и → — изменение значения на step.
  • PageUp / PageDown — изменение на 10% диапазона.
  • Home / End — переход к минимальному или максимальному значению.

На сенсорных устройствах слайдер реагирует на свайпы и перетаскивание, обеспечивая плавное взаимодействие.

Аксессибилити (доступность)

Компонент автоматически добавляет атрибуты ARIA для доступности:

  • role="slider"
  • aria-valuemin, aria-valuemax, aria-valuenow
  • aria-valuetext — при кастомном отображении значения

Эти атрибуты обеспечивают корректное озвучивание слайдера для экранных читалок и соответствие стандартам WCAG.

Композиция с другими компонентами

Slider легко интегрируется с другими элементами интерфейса:

<Slider bind:value={brightness} min={0} max={100} step={1} />
<progress max="100" value={brightness}></progress>
  • Полезно использовать для синхронизации визуального индикатора с числовым значением.
  • Может комбинироваться с input-полем для точного ввода значения:
<input type="number" bind:value={brightness} min={0} max={100} />
<Slider bind:value={brightness} min={0} max={100} step={1} />

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

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

<Slider bind:value={value} let:thumb let:track>
  <div slot="track" class="custom-track"></div>
  <div slot="thumb" class="custom-thumb">{value}</div>
</Slider>
  • slot="track" — замена стандартной дорожки.
  • slot="thumb" — позволяет выводить текущие значения или анимации на ползунке.
  • Позволяет создавать уникальные визуальные эффекты и сложные пользовательские интерфейсы.

Slider в SvelteKit UI сочетает простоту базового использования с возможностью глубокой кастомизации и интеграции, поддерживает доступность, сенсорное управление и управление с клавиатуры. Его гибкость делает его универсальным инструментом для любых интерфейсных задач, связанных с выбором числовых значений.

Оглавление