基于el-slider实现一个能拖动的时间范围选择器

<template>
  <div style="width: 200px">
    <el-slider
      v-model="workTime"
      :step="5"
      :max="1435"
      :marks="marks"
      :format-tooltip="formatTime"
      @input="getTime"
    >
    </el-slider>
  </div>
</template>
<script>
export default {
  name: 'aaa',
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      workTime: 0,
      marks: {
        0: '00:00',
        720: {
          style: {
            color: '#1989FA'
          },
          label: '12:00'
        },
        1435: {
          label: this.$createElement('strong', '23:55')
        }
      },
    }
  },
  methods: {
    /**
     * @Event 分钟转成时间(如：06:05)
     * params: val(分钟)
     * @author: mhf
     * @time: 2024-01-31 14:17:54
     **/
    formatTime(val) {
      const hour = Math.floor(val / 60).toString().padStart(2, '0');
      const min = (val % 60).toString().padStart(2, '0');
      console.log(`${hour}:${min}`)
      return `${hour}:${min}`;
    },
    getTime(e) {
      this.formatTime(e)
    }
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>
<style lang="scss" scoped></style>

<div class="fov">
            <div class="all_slider">
              <div class="assist_mian">
                <div class="rel_slider" :style="{'left':moveWidata.left+'%','right':moveWidata.right+'%'}">
                  <el-slider
                    v-model="currentFov"
                    class="point"
                    :min="fovWid[0]"
                    :max="fovWid[1]"
                    @input="setNoFovUnityData()"
                    @change="getFovAngle()"
                  />
                </div>
              </div>
              <el-slider
                v-model="fovValue"
                class="slider_line"
                range
                :marks="marks"
                :min="30"
                :max="150"
                @change="getFovData()"
              />
            </div>
            <div class="show_slider">
              <div class="each_inp spe_left">
                <el-input
                  v-model="fovMin"
                  :min="Number(30)"
                  :max="Number(150)"
                  onkeyup="value=value.replace(/[^\d]/g,'')"
                  type="text"
                  class="input"
                  @change="getFovMin()"
                />
                <div class="text">最近</div>
              </div>
              <div class="each_inp spe_right">
                <div class="p_right">
                  <el-input
                    v-model="fovMax"
                    :min="Number(30)"
                    :max="Number(150)"
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                    type="text"
                    class="input"
                    @change="getFovMax()"
                  />
                  <div class="text">最远</div>
                </div>
              </div>
            </div>
          </div>

<style lang="scss" scoped>
  .assist_mian {
    width: 100%;
    padding: 0 20px;
    position: relative;
    height: 1px;
  }
  .set_title {
    padding-top: 20px;
    color: #333333;
  }
  .fov {
    padding: 8px 20px 0;
    position: relative;
    overflow: hidden;
  }
  .spe_title {
    display: flex;
  }
  .set_sum {
    flex: 1;
    padding-top: 20px;
    text-align: right;
    color: #999;
    font-size: 12px;
  }
  .number {
    color: #333333;
  }
  .show_slider {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .each_inp {
    flex: 1;
  }
  .spe_left {
    margin-left: -20px;
  }
  .spe_right {
    position: relative;
    margin-right: -20px;
  }
  .input {
    display: block;
    width: 50px;
    height: 30px;
    margin-top: 8px;
    background: #F4F4F4;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E9E9E9;
    text-align: center;
    color: #333;
    font-size: 12px;
  }
  .text {
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #666666;
    text-align: center;
  }
  .p_right {
    position: absolute;
    right: 0;
  }
  .rel_slider {
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
  }
  .input {
    ::v-deep .el-input__inner {
      font-size: 14px !important;
      color: #000000 !important;
      padding: 0;
      height: 30px;
      border: none;
      text-align: center;
    }
  }
</style>
<style lang="scss">
  .point {
    .el-slider__button {
      background: url(../../../assets/cam/icon.png) no-repeat;
      border: none;
    }
    .el-slider__runway {
      margin: 0;
      background: transparent;
    }
    .el-slider__bar {
      background: transparent;
    }
  }
  .slider_line {
    .el-slider__runway {
      margin: 10px 0 16px 0;
    }
    .el-slider__bar {
      background-color: #001B84;
    }
    .el-slider__button {
      border: 2px solid #001B84;
    }
    .el-slider__stop {
      background: transparent;
    }
  }
  .all_slider {
    position: relative;
    // padding: 0 20px;
    top: 8px;
    .el-slider__marks-text {
      color: #000;
    }
  }
</style>

<script>
export default {
  data() {
    return {
      currentFov: 55, // 得到当前值
      fovValue: [50, 100],
      eachWid: (120 / 100), // 得到滑条每个位置的长度，广角
      moveWidata: { left: 0, right: 0 }, // 广角垂直视角选择
      fovWid: [60, 80], // 得到广角滑块得区域
      marks: { // 得到fov限制
        '30': '30',
        '90': '90',
        '150': '150'
      },
      fovMin: 0, // fov的最小值,input框的
      fovMax: 0,
    }
  },
  created() {
    this.getFovData() //初始化一下长度
  },
  methods: {
    // 得到fov的最小值
    getFovMin(e) {
      this.getFovRange(1, 30, 150)
    },
    // 得到fov的最大值
    getFovMax() {
      this.getFovRange(2, 30, 150)
    },
    /**
     * 得到视角fov的数据
     * type是最近还是最远
     *min 最小值
     *max 最大值
     */
    getFovRange(type, min, max) {
      if (type === 1) {
        if (+this.fovMin < min) { // 最小值输入小于最小应输入的则赋值最新值
          this.fovMin = min
          this.fovValue = [min, this.fovValue[1]]
        } else {
          this.fovValue = [+this.fovMin, this.fovValue[1]]
        }
      } else {
        if (this.fovMax > max) {
          this.fovMax = max
          this.fovValue = [this.fovValue[0], max]
        } else {
          this.fovValue = [this.fovValue[0], +this.fovMax]
        }
      }
      this.getFovData(true)
    },
    /**
     * 计算上面当前滑块的长度
     * fov视角得初始化设置
     */
    getFovData(isUnityData = false) {
      if (this.fovMin !== this.fovValue[0]) { 
        this.fovMin = this.fovValue[0]
        const wleft = (this.fovValue[0] - 30) / this.eachWid
        this.moveWidata.left = wleft
      }
      if (this.fovMax !== this.fovValue[1]) { 
        this.fovMax = this.fovValue[1]
        const wright = (150 - this.fovValue[1]) / this.eachWid
        this.moveWidata.right = wright
      }
      this.fovWid = this.fovValue
    }
  }
}
</script>