vue+element：利用滑块选择时间范围

以0点到12点为例，可以选择的维度为分钟
1.引入element
2.插入滑块组件
<el-slider
   v-model="workTime"
   range
   show-stops
   :step="1"
   :max="720"
   :marks="marks"
   :format-tooltip="formatTooltip"
>
</el-slider>
3.滑块标记，在data中声明
marks: {
        0: "00:00",
        480: {
          style: {
            color: "#1989FA",
          },
          label: this.$createElement("strong", "08:00"),
        },
        720: {
          style: {
            width: "36px",
          },
          label: "12:00"
        }
      },
4.format-tooltip处理提示格式
formatTooltip(val) {
      let hour = 0;
      let min = 0;
      hour = parseInt(val / 60);
      if (hour < 10) {
        hour = "0" + hour.toString();
      } else {
        hour = hour.toString();
      }
      min = val - hour * 60;
      if (min < 10) {
        min = "0" + min.toString();
      } else {
        min = min.toString();
      }
      let time = hour + ":" + min;
      console.log(time);
      return time;
    },