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

先看需求：

1. 选中日期的历史事件界面，默认显示当前天24小时的时间轴。
2. 支持往前一天活往后一天拖动时间轴，跨天位置的时间刻度需有明显标记。
3. 界面上仅需显示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);
});

const selectTimeMax = computed(() => {
  const min = selectTimevalue.value[0] ?? 0;
  return Math.min(48, min + 24);
});


const selectTimemarks = computed(() => {
  const [min, max] = selectTimevalue.value;
  let marks = {};
  // 第1种：全部展示
  // for (let i = min; i <= max; i++) {
  //   marks[i] = `${getValue(i)}`;
  //   if (i == min) marks[i] = `${prefix(i)}${getValue(i)}时`;
  //   if (i == max) marks[i] = `${prefix(i)}${getValue(i)}时`;
  // }
  
  // 第2种：只展示滑块的可读
  const prefix = (value) => {
    return value < 0 ? "昨天" : value > 24 ? "明天" : "今天";
  };
  const getValue = (value) => {
    return value < 0 ? 24 + value : value > 24 ? value - 24 : value;
  };

  marks[min] = `${prefix(min)}${getValue(min)}时`;
  marks[max] = `${prefix(max)}${getValue(max)}时`;
  return marks;
});

最后得出滑块效果