Javascript 用于在24小时内获取多个时间间隔的UI控件

我正在开发的网站需要用户在一天内输入多个时间间隔（24小时）。 我能想到的最直观的方法是类似于滑块范围的控件，但具有多个范围。 上面有数字0到23的酒吧，每小时分成4（00,15,30,45）部分。 鼠标向下：开始标记 鼠标：停止标记

不过，有一个重要的问题：由于屏幕太小，它在智能手机浏览器上肯定无法正常工作（我还应该用触摸屏来代替鼠标事件）

---

那么，您有什么建议可以为用户提供输入时间跨度的最佳用户体验？我不喜欢使用文本输入，因为它们看起来太传统了。在考虑设备兼容性的同时，我想更具创意。

多个滑块，每个范围一个，怎么样。这样，它在较小的设备上也可以正常工作。另外，如果您的滑块具有对齐标记（0、15、30、60标记）功能，可用性也不会很差。我认为这不会缓解问题。24小时，每个细胞有4个标记，因此有72个细胞。一个小屏幕大约为350px，因此考虑到页面填充等因素，每个单元格最多可以是4px。由于手指触摸没有鼠标的精度，用户不容易在条形图上突出显示一个范围，无论是一个范围还是多个范围。