Настройка диапазона значений

Диапазон значений — ключевая часть компонентов ввода числовых данных в Carbon Components Svelte, таких как Slider, NumberInput, и RangeSlider. Правильная настройка диапазона обеспечивает удобство работы с интерфейсом, предотвращает ошибки ввода и поддерживает согласованность данных.

Компонент Slider

Slider позволяет пользователю выбирать значение из заданного диапазона. Основные свойства для настройки диапазона:

<Slider
  min={0}
  max={100}
  step={5}
  value={50}
/>
  • min — минимальное значение слайдера. Если не указано, по умолчанию 0.
  • max — максимальное значение. По умолчанию 100.
  • step — шаг, с которым изменяется значение при перетаскивании ползунка. Важен для дискретного выбора.
  • value — текущее значение. Оно должно находиться в диапазоне [min, max]. Если значение выходит за пределы, компонент автоматически корректирует его до ближайшей границы.

Особенности работы с шагом:

  1. Если step больше разницы между min и max, ползунок будет принимать только одно значение — min.
  2. Дробные шаги поддерживаются, что удобно для тонкой настройки параметров, например, step={0.1}.

Компонент RangeSlider

RangeSlider используется для выбора диапазона значений, а не одного числа. Его свойства включают:

<RangeSlider
  min={0}
  max={1000}
  step={10}
  value={[200, 800]}
/>
  • value — массив из двух элементов [minValue, maxValue]. Компонент гарантирует, что minValue <= maxValue.
  • step влияет на оба ползунка, позволяя синхронно изменять диапазон.
  • При установке значений за пределами [min, max], компонент автоматически корректирует их.

Совет по UX: минимальная разница между minValue и maxValue должна соответствовать step, иначе ползунки могут “слипаться” при перетаскивании.

Компонент NumberInput

NumberInput обеспечивает ввод чисел с клавиатуры и позволяет ограничивать диапазон с помощью min и max:

<NumberInput
  min={1}
  max={10}
  value={5}
  step={1}
/>
  • Если пользователь вводит значение меньше min или больше max, компонент автоматически корректирует его при потере фокуса.
  • Свойство step позволяет контролировать инкременты кнопок увеличения/уменьшения.

Важно: NumberInput не предотвращает ввод некорректных символов (например, букв), но при сохранении значения в компоненте оно будет приведено к допустимому числу.

Синхронизация диапазона с состоянием

Carbon Components Svelte поддерживает реактивные переменные для привязки значений:

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

<Slider min={0} max={100} bind:value={volume} />
<p>Текущее значение: {volume}</p>
  • bind:value создаёт двустороннюю привязку, позволяя компоненту обновлять переменную и наоборот.
  • Для RangeSlider используется массив:
<script>
  import { RangeSlider } from "carbon-components-svelte";
  let range = [20, 80];
</script>

<RangeSlider min={0} max={100} step={5} bind:value={range} />
<p>Диапазон: {range[0]} - {range[1]}</p>

Проверка и валидация диапазона

Для надёжной работы компонентов рекомендуется контролировать:

  1. Корректность min и max: min не должен быть больше max.
  2. Совместимость step с диапазоном: (max - min) % step должно быть равно 0 для точного позиционирования.
  3. Взаимное расположение ползунков для RangeSlider: value[0] <= value[1].

Использование реактивной проверки:

$: if (range[0] > range[1]) {
  range = [range[1], range[0]];
}

Это предотвращает обратное перепрыгивание ползунков и обеспечивает корректное отображение диапазона.

Настройка динамического диапазона

Диапазон можно изменять на лету:

<script>
  import { Slider } from "carbon-components-svelte";
  let minVal = 0;
  let maxVal = 50;
  let value = 25;
</script>

<Slider min={minVal} max={maxVal} bind:value={value} />

<button on:click={() => maxVal += 10}>Увеличить максимум</button>
<button on:click={() => minVal += 5}>Сдвинуть минимум</button>
<p>Текущее значение: {value}</p>
  • При изменении min или max компонент автоматически корректирует value, чтобы оно оставалось в пределах диапазона.
  • Это удобно для динамических интерфейсов, например, фильтров с изменяющимися границами.

Выводы по настройке диапазона

  • Минимум и максимум определяют границы возможного ввода.
  • Шаг влияет на дискретность и точность выбора.
  • Значение должно всегда находиться внутри диапазона; компоненты автоматически корректируют его при нарушении.
  • Для RangeSlider важно соблюдать правильный порядок ползунков и минимальную разницу.
  • Использование реактивных переменных позволяет синхронизировать компоненты с состоянием приложения и динамически менять диапазон.

Эти принципы создают основу для точного, безопасного и удобного взаимодействия с числовыми данными в Carbon Components Svelte.

Оглавление