基于Uniapp + VUE3.0 + TS 实现一个支持双滑块的Slider滑块组件

<template>
  <view class="uni-slider-container">
    <view
      class="uni-slider-bar"
      @touchmove="move"
      @touchend="end"
      ref="sliderBar"
    >
      <view class="uni-slider-button-wrapper">
        <view
          class="uni-slider-button"
          ref="button1"
          :style="{left: button1Left + 'px'}"
        ></view>
        <view
          class="uni-slider-button"
          ref="button2"
          :style="{left: button2Left + 'px'}"
        ></view>
      </view>
      <view class="uni-slider-background"></view>
    </view>
  </view>
</template>
 
<script lang="ts">
import { ref } from 'vue';
 
export default {
  setup() {
    const button1Left = ref(0);
    const button2Left = ref(50);
    const sliderBar = ref<HTMLElement | null>(null);
    const button1 = ref<HTMLElement | null>(null);
    const button2 = ref<HTMLElement | null>(null);
 
    const move = (event: TouchEvent) => {
      if (sliderBar.value) {
        const touch = event.touches[0];
        const maxLeft = sliderBar.value.offsetWidth - button1.value!.offsetWidth;
        button1Left.value = Math.min(maxLeft, Math.max(0, touch.clientX - sliderBar.value.getBoundingClientRect().left));
        button2Left.value = Math.min(maxLeft, Math.max(button1Left.value + button1.value!.offsetWidth, touch.clientX - sliderBar.value.getBoundingClientRect().left));
      }
    };
 
    const end = () => {
      // 滑动结束后的逻辑处理，例如触发事件等
    };
 
    return { button1Left, button2Left, move, end, sliderBar, button1, button2 };
  }
};
</script>
 
<style>
.uni-slider-container {
  width: 100%;
  height: 50px;
  position: relative;
}
 
.uni-slider-bar {
  width: 100%;
  height: 5px;
  background-color: #e9e9e9;
  position: relative;
  touch-action: none;
}
 
.uni-slider-button-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
 
.uni-slider-button {
  position: absolute;
  top: 0;
  width: 50px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 10px;
  box-shadow: 0 1px 2px #eee;
  z-index: 10;
}
 
.uni-slider-background {
  position: absol