可拖动的时间轴(vue3+ts使用element-plus的Slider滑块封装)

<template>
  <el-slider
    v-model="timeValue"
    :min="minTime"
    :max="maxTime"
    @change="handleTimeChange"
  ></el-slider>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
import { ElSlider } from 'element-plus';

export default defineComponent({
  components: {
    ElSlider,
  },
  setup() {
    const timeValue = ref(0);
    const minTime = ref(0);
    const maxTime = ref(24);

    const handleTimeChange = (value: number) => {
      console.log('时间已更改为：', value);
    };

    return {
      timeValue,
      minTime,
      maxTime,
      handleTimeChange,
    };
  },
});
</script>

<style>
/* 在这里添加样式 */
</style>