基于slider做时间选择器（三天范围内移动）

最新推荐文章于 2024-10-21 17:25:54 发布

原创

最新推荐文章于 2024-10-21 17:25:54 发布 · 571 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文描述了一个需求，设计一个日期事件界面，时间轴能在指定三天范围内自动调整范围，保持在24小时内。通过计算属性处理滑块拖动，确保刻度在[-24,48]区间内，同时提供两种标记方式。最终展示了如何实现在不同情况下的滑块效果。

先看需求：

选中日期的历史事件界面，默认显示当前天24小时的时间轴。
支持往前一天活往后一天拖动时间轴，跨天位置的时间刻度需有明显标记。
界面上仅需显示24小时刻度，时间轴拖动仅改变显示的时间刻度，比如未拖动前显示的是0~23点，往左拖动5小时后，时间刻度范围显示的就是今天6点到明天5点。

分析需求：
1.在三天范围内，那么我们可以想到最大值和最小值就是在区间[-24,48]之间，那我们可以通过min和max属性来限制最大和最小
2.但是我们在拖动的时间，始终希望刻度在24个小时内，所以最大最小值应该随着滑块的拖动值而变化，那么极限的变化就是最小值： max - 24 , 最大值，min + 24，这样我们始终可以把范围限制在24小时，但是这样就会存在，超出边界的情况
3.结合区间范[-24,48]之间，我们在结合最大和最小值

代码如下

//最小值，由最大值-24l配合上极限范围-24来决定
const selectTimeMin = computed(() => {
   
   
  const max = selectTimevalue.value[1] ?? 24;
  return Math.max(-24, max - 24);