# Slider Component

## Описание

Слайдер - это UI-компонент, который позволяет пользователю выбирать значение или диапазон значений с помощью перемещения ползунка. Компонент поддерживает одиночный и диапазонный режимы, настройку минимального/максимального значения и шага, а также другие параметры через систему пропсов.

## Пропсы

| Название        | Тип                                           | По умолчанию          | Описание                                                                      |
| --------------- | --------------------------------------------- | --------------------- | ----------------------------------------------------------------------------- |
| `id`            | `string`                                      | `crypto.randomUUID()` | Уникальный идентификатор компонента                                           |
| `wrapperClass`  | `string`                                      | `""`                  | Дополнительные CSS-классы для обертки компонента                              |
| `label`         | `object`                                      | `-`                   | Настройки заголовка компонента                                                |
| `label.name`    | `string`                                      | `""`                  | Текст заголовка компонента                                                    |
| `label.class`   | `string`                                      | `""`                  | CSS-классы для стилизации текста заголовка                                    |
| `type`          | `"single" \| "range"`                         | `"single"`            | Тип слайдера: `single` — одно значение, `range` — диапазон с двумя ползунками |
| `value`         | `number \| [number, number]`                  | `0`                   | Значение(я) слайдера: число для `single`, массив из двух чисел для `range`    |
| `number`        | `object`                                      | `-`                   | Настройки числового диапазона                                                 |
| `number.minNum` | `number`                                      | `0`                   | Минимальное значение                                                          |
| `number.maxNum` | `number`                                      | `10`                  | Максимальное значение                                                         |
| `number.step`   | `number`                                      | `1`                   | Шаг изменения значения                                                        |
| `disabled`      | `boolean`                                     | `false`               | Состояние отключения компонента                                               |
| `onUpdate`      | `(value: number \| [number, number]) => void` | `() => {}`            | Обработчик изменения значения                                                 |

## События

| Название | Тип                                         | Описание                                    |
| -------- | ------------------------------------------- | ------------------------------------------- |
| onUpdate | (value: number \| [number, number]) => void | Срабатывает при изменении значения слайдера |

## Примеры

### Одиночный слайдер

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"

  let sliderValue = 0

  const handleUpdate = (value) => {
    sliderValue = value
    console.log("Новое значение:", value)
  }
</script>

<UI.Slider
  wrapperClass="!w-1/3 bg-red px-2"
  label={{ name: "Слайдер" }}
  value={sliderValue}
  number={{ minNum: -50, maxNum: 50, step: 1 }}
  disabled={false}
  {onUpdate}
/>
```

### Диапазонный слайдер

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"

  let rangeValue = [-12, 35]

  const handleUpdate = (value) => {
    rangeValue = value
    console.log("Новый диапазон:", value)
  }
</script>

<UI.Slider
  wrapperClass="!w-1/3 bg-blue px-2"
  label={{ name: "Слайдер с диапазоном" }}
  type="range"
  value={rangeValue}
  number={{ minNum: -50, maxNum: 50, step: 1 }}
  disabled={false}
  {onUpdate}
/>
```

### Отключенный слайдер

```svelte
<script>
  import * as UI from "poe-svelte-ui-lib"

  let disabledValue = [-10, 12]
</script>

<UI.Slider
  wrapperClass="!w-1/3 bg-blue px-2"
  label={{ name: "Слайдер с диапазоном (не активный)" }}
  type="range"
  value={disabledValue}
  number={{ minNum: -15, maxNum: 15, step: 1 }}
  disabled={true}
/>
```

## Внутренняя архитектура

### Реактивность

- Переменные `singleValue`, `lowerValue` и `upperValue` хранят текущие значения слайдера
- Переменная `isRange` определяет режим работы слайдера
- Переменная `centerNum` вычисляет центральное значение для диапазонного слайдера
- Функция `adjustValue` изменяет значение слайдера с учетом шага и границ

### Сторы и зависимости

- Используется стор `twMerge` для объединения Tailwind CSS классов
- Используется `navigator.userAgent` для определения типа устройства для корректного отображения слайдера

### Директивы

- `bind:value` для двусторонней привязки значений слайдера
- `$effect` для синхронизации значений при изменении входных данных
- `oninput` для обработки изменения значений через пользовательский ввод

### Слоты

- Компонент не использует внешних слотов

## Конструктор свойств (SliderProps.svelte)

### Описание

Компонент `SliderProps.svelte` предоставляет визуальный интерфейс для редактирования свойств компонента слайдера. Поддерживает два режима отображения: для конструктора и для редактирования.

### Пропсы конструктора

| Название           | Тип                                                                                                                                 | По умолчанию | Описание                                                |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------- |
| `component`        | `UIComponent & { properties: Partial<ISliderProps> }`                                                                               | `-`          | Объект компонента с его свойствами                      |
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`          | Коллбэк для обновления свойств компонента               |
| `forConstructor`   | `boolean`                                                                                                                           | `true`       | Режим отображения (для конструктора или редактирования) |

### Особенности конструктора

- Предоставляет визуальные элементы управления для всех доступных свойств
- Поддерживает настройку типа слайдера (одиночный или диапазонный)
- Включает настройки диапазона значений и шага
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
- Использует систему локализации через `$T('constructor.props.*')`

## Заметки

### Адаптивность

- Компонент использует Tailwind CSS для адаптивного дизайна
- Слайдер автоматически масштабируется под размер контейнера
- Используются относительные единицы измерения для обеспечения масштабируемости

### Ограничения

- Для диапазонного слайдера значение должно быть массивом из двух чисел
- Значения слайдера ограничены минимальным и максимальным значениями
- Шаг изменения должен быть положительным числом

### Производительность

- Компонент использует оптимизации Svelte для минимизации перерисовок
- Значения нормализуются для предотвращения некорректного отображения
- Используется эффективное объединение классов через `twMerge`