Диапазоны

SweetAlert — это мощная библиотека для создания настраиваемых и красивых всплывающих окон в веб-приложениях. Одной из полезных функций является работа с диапазонами, которые позволяют пользователю выбирать значения в определённом интервале. В SweetAlert диапазоны могут быть реализованы с помощью поля ввода, которое ограничивает значения в определённых границах. Рассмотрим, как использовать эту возможность и настроить её под свои нужды.

Создание диапазона с использованием поля ввода

Для начала необходимо настроить базовое окно SweetAlert с полем ввода, которое будет ограничено диапазоном. Например, это может быть диапазон чисел от 1 до 100. Библиотека позволяет использовать поля ввода с типом range, что делает этот процесс удобным и быстрым.

Swal.fire({
  title: 'Выберите значение',
  input: 'range',
  inputAttributes: {
    min: 1,
    max: 100,
    step: 1
  },
  inputValue: 50
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Вы выбрали значение: ' + result.value);
  }
});

В этом примере создаётся окно с ползунком, который ограничен значениями от 1 до 100. Параметр step задаёт шаг изменения, а начальное значение (по умолчанию 50) указывается через inputValue. После того как пользователь выбирает значение, оно доступно в свойстве result.value.

Настройка внешнего вида диапазона

В SweetAlert можно кастомизировать внешний вид диапазона. Для этого используются стандартные параметры HTML, такие как min, max, step и другие. Однако, чтобы улучшить визуальное восприятие, можно добавить дополнительные стили.

Например, можно использовать параметр inputAttributes для задания стилей через CSS:

Swal.fire({
  title: 'Выберите значение',
  input: 'range',
  inputAttributes: {
    min: 0,
    max: 1000,
    step: 10,
    style: 'width: 100%;'
  },
  inputValue: 500
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Вы выбрали значение: ' + result.value);
  }
});

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

Валидация выбранного диапазона

Важным аспектом работы с диапазонами является валидация значения, выбранного пользователем. Это необходимо, если нужно убедиться, что введённое значение попадает в допустимый интервал. SweetAlert предоставляет механизм обработки значений через обработчик then. В нём можно выполнить проверку и отменить подтверждение в случае несоответствия.

Пример валидации выбранного значения:

Swal.fire({
  title: 'Выберите число от 10 до 50',
  input: 'range',
  inputAttributes: {
    min: 10,
    max: 50,
    step: 1
  },
  inputValue: 20
}).then((result) => {
  if (result.isConfirmed) {
    if (result.value < 10 || result.value > 50) {
      Swal.fire('Ошибка', 'Число должно быть в пределах от 10 до 50', 'error');
    } else {
      console.log('Вы выбрали значение: ' + result.value);
    }
  }
});

В этом примере проверяется, что выбранное значение находится в допустимом диапазоне от 10 до 50. Если значение выходит за пределы, то выводится ошибка, и процесс подтверждения не продолжается.

Динамическое обновление диапазона

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

Пример динамической корректировки диапазона:

Swal.fire({
  title: 'Выберите значение',
  input: 'range',
  inputAttributes: {
    min: 0,
    max: 100,
    step: 1
  },
  inputValue: 50
}).then((result) => {
  if (result.isConfirmed) {
    // Динамическое изменение диапазона
    Swal.fire({
      title: 'Обновите диапазон',
      input: 'range',
      inputAttributes: {
        min: 0,
        max: result.value * 2,
        step: 1
      },
      inputValue: result.value
    });
  }
});

Здесь, после того как пользователь выбрал значение, диапазон второго окна будет зависеть от этого значения. Например, если пользователь выбрал 50, второй ползунок будет ограничен значениями от 0 до 100.

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

Вместо числового диапазона SweetAlert позволяет работать и с диапазонами дат. Хотя сама библиотека не предоставляет прямой поддержки для выбора дат, можно комбинировать SweetAlert с другими библиотеками, такими как flatpickr, для создания кастомизированных диапазонов дат.

Пример использования SweetAlert с диапазоном дат:

Swal.fire({
  title: 'Выберите дату',
  input: 'text',
  inputValue: '2023-01-01',
  inputAttributes: {
    'data-datepicker': true // Применение flatpickr
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Вы выбрали дату: ' + result.value);
  }
});

В этом примере используется сторонний плагин для добавления календаря, который позволяет выбирать даты в пределах заданного диапазона.

Заключение

Использование диапазонов в SweetAlert предоставляет гибкие возможности для создания интерактивных элементов выбора, будь то числа, даты или другие значения. Кастомизация внешнего вида, валидация значений и динамическое изменение параметров диапазона позволяют адаптировать SweetAlert под любые задачи и улучшить пользовательский опыт.

Оглавление