Element Plus 的 el-slider 组件怎么设置两段滑块

Element Plus 的 `el-slider` 组件默认是一个单滑块，如果需要创建一个包含两个独立滑块的两段滑块，你可以通过结合 Vue.js 的组件嵌套以及 API 来实现。以下是步骤：

1. 首先，在模板中引入并使用两个独立的 `el-slider` 组件，分别绑定到两个不同的值（比如 `sliderValue1` 和 `sliderValue2`）:

<template>
  <div>
    <el-slider v-model="sliderValue1" :min="0" :max="100" @change="onChange1"></el-slider>
    <div>Slider Value 1: {{ sliderValue1 }}</div>

    <el-slider v-model="sliderValue2" :min="50" :max="200" @change="onChange2"></el-slider>
    <div>Slider Value 2: {{ sliderValue2 }}</div>
  </div>
</template>

2. 在数据对象中定义这两个滑块的初始值:

export default {
  data() {
    return {
      sliderValue1: 50,
      sliderValue2: 100,
    };
  },
  methods: {
    onChange1(value) {
      this.sliderValue1 = value;
    },
    onChange2(value) {
      this.sliderValue2 = value;
    },
  },
};

3. 可以选择性地添加样式来区分两个滑块，并根据业务需求调整它们的位置、颜色或其他外观属性。