Живая мастерская · noUiSlider
Диапазон → действие
Двигайте ручки, вводите точные значения и смотрите, как меняется интерфейс.
Фильтр товаров и услуг
Цена от и до
Две границы управляют выдачей каталога. Все цены и товары в примере вымышлены.
Попробуйте: задайте 5 000–7 000 ₽ — останутся две карточки. Диапазон 1 000–1 200 ₽ покажет пустую выдачу.
От 0 до 10 000 ₽, шаг 100 ₽. Границы включаются в результат.
Подходящие услуги
5 из 8Расширьте границы или верните исходный фильтр.
Запись и аренда
Выберите интервал
Один условный день: с 09:00 до 18:00. Перемещайте любую ручку или весь выделенный отрезок.
Попробуйте: приблизьте ручки — длительность не станет меньше часа. Максимум — 4 часа, шаг — 15 минут.
Длительность 60–240 минут. Это выбор интервала, без проверки реальной доступности.
2 ч
Интервал ещё не выбран.
Настройки сервиса
Срок хранения копий
Доступны шесть политик: 1, 3, 7, 14, 30 и 90 дней. Ползунок выбирает вариант, а конфигурация хранит число дней.
Попробуйте: выберите «14 дней». В JSON появится retentionDays: 14, а не порядковый номер варианта.
Возраст контрольных копий
Выделены точки, попадающие в выбранный срок. Здесь ничего не удаляется: это предпросмотр политики.
Конфигуратор ресурсов
Большой диапазон — точный выбор
Шкала от 10 до 10 000 единиц нелинейная. Малые значения занимают больше места и меняются точнее.
Попробуйте: введите 456 — значение станет 460 по шагу этого участка. При пакете 250 нужны 2 пакета, последний заполнен на 84%.
Шаг: 1 до 100; 10 от 100 до 1 000; 100 от 1 000 до 10 000.
Заполнение последнего пакета: 40%.
Планирование работ
Четыре этапа из 100%
Три ручки задают границы этапов. Перемещение границы перераспределяет время между соседними этапами.
Попробуйте: измените среднюю границу с 75% на 80%. При 40 часах проверка получит 12 часов, документация — 4.
Каждому этапу — минимум 5%. Границы идут по возрастанию; это накопленные проценты, а не доли этапов.
| Этап | Доля | Часы |
|---|---|---|
| Итого | 100% | 40 ч |
Оформление интерфейса
Смешайте цвет акцента
Три независимых регулятора меняют только карточку предпросмотра и CSS-переменную для вашего интерфейса.
Попробуйте: установите RGB 0 / 0 / 0 — получите #000000. Пресет «Белый» даст #FFFFFF.
Личный кабинет
Цвет акцента меняет полосу и образец кнопки.
#227369rgb(34, 115, 105)--accent-color: #227369;Текст образца автоматически становится светлым или тёмным. Контраст остальных элементов вашего интерфейса нужно проверить отдельно.