Я хочу реализовать селектор временных интервалов в форме слайдера jquery/javascript.
Есть несколько библиотек слайдеров, таких как Ion Slider, jQRangeSlider и т. д., но я не знаю, как бы я поступил с этим. Не похоже, что они поддерживают несколько «мертвых зон».
Я хочу, чтобы пользователь мог выбирать временной интервал (от и до) в течение определенного дня. Чтобы выбрать день, я реализовал средство выбора даты, затем для даты я извлекаю, например, уже занятые слоты:
07h00 - Available
07h30 - Available
08h00 - Occupied
08h30 - Occupied
09h00 - Occupied
09h30 - Available
...
18h30 - Available
19h00 - Available
Таким образом, средство выбора диапазона должно выглядеть так:
Пользователь должен иметь возможность только выбрать часовой пояс в доступных разделах (синий) и перетащить начальный ползунок между «доступными» разделами, и селектор конца будет двигаться вместе с ним. Может быть несколько недоступных зон (красный).
Возможно ли это с уже существующими библиотеками или это мой собственный случай?
Я подумал об использовании нескольких флажков, затем отметьте все поля между начальным и конечным временными интервалами и отключите уже занятые слоты, но я думаю, что такой ползунок был бы гораздо более удобным для пользователя, функционально и визуально .