el-slider节点设置不同的样式案例

下面是一个el-slider节点设置不同样式的案例：

<template>
  <div>
    <el-slider v-model="value1" :height="6" :bar-height="4" :tooltip="false" :max="100" :min="0" :show-input="true"></el-slider>
    <el-slider v-model="value2" :height="20" :bar-height="10" :tooltip="false" :max="100" :min="0" :show-input="true"></el-slider>
    <el-slider v-model="value3" :height="6" :bar-height="4" :tooltip="false" :max="100" :min="0" :show-input="true" :disabled="true"></el-slider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 50,
      value2: 30,
      value3: 70
    }
  }
}
</script>

<style scoped>
.el-slider__button-wrapper {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #409EFF;
}

.el-slider__runway {
  background-color: #E4E7ED;
}

.el-slider__bar {
  height: 4px;
  border-radius: 2px;
  background-color: #409EFF;
}

.el-slider__process {
  height: 4px;
  border-radius: 2px;
  background-color: #409EFF;
}

.el-slider__tooltip {
  border-radius: 2px;
  background-color: #409EFF;
  color: #FFFFFF;
}
</style>

在这个案例中，我们定义了三个el-slider节点，分别设置了不同的高度、进度条高度、是否显示提示框和禁用状态。同时，我们在样式中对el-slider的各个部分进行了自定义样式的设置，如按钮、滑条、进度条、提示框等。