noUiSlider: мастерская и 6 интерфейсных примеров
Версия 1.0.1. 6 ноября 2026 года.

Открыть мастерскую компонента: lab.html.
Открыть прикладные интерфейсы: index.html.
Технологии: HTML5, Bootstrap 5.3.8 CSS, обычный JavaScript, noUiSlider 15.8.1.
Все зависимости находятся в assets/vendor; CDN и внешний API при работе не нужны.
Лицензии и точные источники зависимостей: assets/vendor/*LICENSE* и sources.json.

Запуск
1. Распакуйте архив в отдельную папку.
2. Откройте терминал в папке с index.html.
3. Выполните: python -m http.server 8080 --bind 127.0.0.1
4. Откройте http://127.0.0.1:8080/index.html или /lab.html.
PHP или WordPress для локальных примеров не требуется.

Интерфейсные сценарии
index.html#catalog — фильтр каталога по цене.
index.html#booking — интервал одного условного дня, 09:00–18:00.
index.html#retention — срок хранения из разрешённого списка.
index.html#capacity — нелинейная шкала объёма и расчёт пакетов.
index.html#allocation — три границы, четыре доли с общей суммой 100%.
index.html#color — RGB, HEX и CSS-переменная.

Изменяйте ползунки, вводите значения и нажимайте «Применить».
Неверный ручной ввод сохраняет последний корректный результат.
Изменение интервала сбрасывает подтверждение бронирования.
Сброс действует только на открытый пример.
Клавиатура: Tab выбирает ручку; стрелки меняют значение. В переключателе
примеров доступны стрелки влево/вправо, Home и End.

Код, JSON и скачивание
JSON содержит числовые данные текущего сценария, а не несохранённые поля формы.
Код в блоке «Готовый HTML + JavaScript» использует текущие настройки.
При ручном копировании сохраните код в examples/ рядом с остальными примерами:
он использует ../assets/vendor/nouislider.min.js и CSS.
«Скачать HTML» встраивает библиотеку и стили внутрь файла. Такой файл можно
открыть прямо с диска без сервера и интернета. Подтверждение брони в новом
экземпляре начинается заново; сохраняются выбранные границы.
Папка examples/ содержит шесть стартовых самостоятельных примеров.

Устройство
assets/model.js — чистые расчёты и проверки значений.
assets/workshop.js — состояния, привязка контролов, результаты и действия.
assets/examples.js — построение готового HTML для каждого сценария.
assets/workshop.css — оформление прикладных примеров.
lab* — мастерская параметров слайдера и автономный экспорт.
embed.js/css — изменение высоты iframe и связь с кнопками статьи.
lab-export-vendor.js содержит точные копии noUiSlider JS/CSS для экспорта.

Встраивание
Для iframe задайте осмысленный title. Сообщение высоты:
{type:'aen-nouislider-height',height:число}.
Родитель обязан проверять event.origin и event.source своего iframe.
Пример из статьи выбирается сообщением:
{type:'aen-nouislider-select',scenario:'catalog'}.
Получатель проверяет origin/source родителя и разрешённый список сценариев.

Границы демонстрации
Товары, цены, бронирование и политики являются учебными примерами.
Приложение не отправляет заявки, не удаляет копии и не сохраняет данные на сервер.
Нелинейная ёмкость — расчёт условных единиц, не расчёт реального сервера.
RGB-пример меняет только свой образец и не проверяет весь интерфейс на доступность.
В рабочем приложении любые входные данные повторно проверяются на сервере.

Авторские файлы примеров можно использовать и изменять по лицензии MIT.
