Шаги и дискретные значения

Компоненты с дискретными значениями в Carbon Components Svelte позволяют пользователям выбирать конкретные фиксированные значения вместо произвольного диапазона. Основными примерами являются Slider и Dropdown, где шаги (step) и дискретные значения критически важны для точного контроля пользовательского ввода.

Настройка Slider с шагами

Слайдер (Slider) поддерживает свойство step, определяющее величину изменения значения при перемещении ползунка. Без явного указания step слайдер интерпретирует любое значение в диапазоне как допустимое, что не всегда подходит для дискретного выбора.

Пример с шагами:

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

<Slider
  bind:value={volume}
  min={0}
  max={100}
  step={10}
  labelText="Громкость"
  showInput
/>

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

  • min и max задают диапазон допустимых значений.
  • step={10} ограничивает ползунок дискретными значениями: 0, 10, 20 … 100.
  • bind:value обеспечивает реактивную синхронизацию состояния с переменной volume.
  • showInput позволяет пользователю вводить значение вручную, при этом соблюдая шаги.

Использование дискретного выбора в Dropdown

Для выбора из фиксированного набора значений идеально подходит компонент Dropdown. Каждый элемент списка можно интерпретировать как дискретное значение.

<script>
  import { Dropdown } from 'carbon-components-svelte';
  let selectedOption = null;
  const options = [
    { id: '1', label: 'Низкий' },
    { id: '2', label: 'Средний' },
    { id: '3', label: 'Высокий' }
  ];
</script>

<Dropdown
  bind:value={selectedOption}
  items={options}
  label="Приоритет"
  itemToString={(item) => (item ? item.label : '')}
/>

Особенности:

  • items задаёт массив объектов с уникальными id и текстовым label.
  • itemToString конвертирует объект в отображаемое значение.
  • Связывание через bind:value позволяет легко работать с выбранным элементом в логике приложения.

Интеграция Slider и Dropdown для дискретного выбора

Часто требуется комбинировать слайдер с заранее определёнными дискретными значениями, аналогичными элементам dropdown. Для этого можно использовать массив допустимых значений и на основе индекса управлять ползунком.

<script>
  import { Slider } from 'carbon-components-svelte';
  let levels = [0, 25, 50, 75, 100];
  let selectedIndex = 2;
  
  $: selectedValue = levels[selectedIndex];
</script>

<Slider
  bind:value={selectedIndex}
  min={0}
  max={levels.length - 1}
  step={1}
  labelText="Уровень"
  showInput
/>

<p>Выбранный уровень: {selectedValue}</p>

Разбор механизма:

  • Слайдер управляет индексом массива levels.
  • step={1} обеспечивает выбор только существующих дискретных уровней.
  • Реактивное вычисление $: selectedValue = levels[selectedIndex] преобразует индекс в реальное значение.
  • Такой подход позволяет реализовать сложные шкалы с нестандартными интервалами между значениями.

Настройка визуальной индикации дискретных шагов

В Slider можно визуально показать шаги с помощью свойства stepLabels или ticks. Для Svelte версии библиотеки часто создаются кастомные отметки:

<script>
  import { Slider } from 'carbon-components-svelte';
  let values = [0, 25, 50, 75, 100];
</script>

<Slider
  min={0}
  max={values.length - 1}
  step={1}
  labelText="Дискретные значения"
  showInput
>
  <div slot="tickLabels">
    {#each values as val, idx}
      <span style="position:absolute; left:{(idx/(values.length-1))*100}%">{val}</span>
    {/each}
  </div>
</Slider>

Ключевые детали:

  • slot="tickLabels" используется для отображения кастомных отметок.
  • Процентное позиционирование позволяет точно синхронизировать визуальные тики с ползунком.
  • Можно комбинировать с showInput, чтобы пользователь мог вводить только допустимые значения.

Работа с дискретными значениями в числовых полях

Иногда шаги необходимо применять к числовым полям (NumberInput) для контроля ввода:

<script>
  import { NumberInput } from 'carbon-components-svelte';
  let quantity = 0;
</script>

<NumberInput
  bind:value={quantity}
  min={0}
  max={100}
  step={5}
  label="Количество"
/>
  • step={5} предотвращает ввод значений, не кратных 5.
  • Полезно при интеграции с формами и бизнес-логикой, где нужны фиксированные дискретные величины.

Резюме по дискретным значениям

  • step управляет дискретностью в Slider и NumberInput.
  • Для нестандартных шагов и массивов допустимых значений лучше управлять индексами и отображать реальные значения реактивно.
  • Dropdown идеально подходит для выбора среди фиксированных опций.
  • Визуальные отметки (tickLabels) помогают пользователю понимать доступные дискретные значения.

Этот подход обеспечивает точность пользовательского ввода и повышает удобство работы с компонентами Carbon Components Svelte, особенно когда важны фиксированные уровни, интервалы или заранее определённые варианты.

Оглавление