修改Element Slider 滑块 label选中样式 (自定义 Elementui Slider 滑块 样式)

效果图：

 

 

 1，加入slider滑块代码

      <el-slider
        v-model="level"
        vertical
        :show-stops="true"
        :show-tooltip="false"
        :step="1"
        :min="0"
        :max="45"
        :marks="marks1h"
        @change="changeValue"
        :format-tooltip="formatTooltip"
      >
      </el-slider>

2，定义formatTooltip方法

    formatTooltip(val) {
      /* 自定义mask文字颜色 */
      const customClassValue = document.getElementsByClassName(
        "el-slider__marks-text"
      );
      for (let i = 0; i < customClassValue.length; i++) {
        customClassValue[i].style.color = "#ffff";
        /* 改变颜色 */

　　　　　//如果val等于v-model绑定的值就给他设置成黄色，否则就是白色
        if (val == this.level) {
          customClassValue[this.level].style.color = "#FFD614";
        } else {
          customClassValue[i].style.color = "#fff";
        }
      }
    },