自定义 Elementui Slider 滑块 样式

ElementUI 是一套ui组件库，提供了大量前端组件，但一些组件只提供了比较单一的样式，难免遇到要需求修改其默认样式的情况，本文就介绍一下个人在工作中对Elementui Slider 滑块样式修改的方法。

Elementui Slider 滑块 官网：https://element.eleme.cn/#/zh-CN/component/slider

---

自定义Elementui Slider样式效果

 

---

修改说明

1、根据个人前端展示需求改写了Elementui Slider 样式。

2、实现在拖动滑块或通过input组件调整Slider数值时动态修改masks颜色，如上图，Slider组件masks文本颜色默认为灰色，当Slider 绑定数值超过masks时对应的masks文本会动态变更颜色为白色。（使用format-tooltip或change都可以实现，效果不同）

3、通过Elementui Slider提供的format-tooltip（格式化 tooltip message）属性实现在原min、max控制的基础上自定义新的min、max，如上图，max最大为3100，通过format-tooltip属性实现数值超过3000后会自动变更为3000。

备注：本示例使用format-tooltip实现动态修改masks颜色，之所以没用change事件，是因为change时间在使用鼠标拖曳时，只在松开鼠标后触发，这样会导致动态调整masks颜色延迟，如果觉得无所谓用change事件方式性能更好（不过这点消耗几乎可以或略了）。

 

vue示例代码

1、加入slider组件

<el-slider v-model="orderForm.bandWidth" :step="50" :max="3050" :marks="marks" show-input :format-tooltip="formatTooltip" />

2、定义formatTooltip方法

formatTooltip(val) {
    /* 处理小于或大于指定值 */
    if (val < 50) {
        this.orderForm.bandWidth = 50
        this.orderData.bandWidth = 50
    } ease if (val > 3000) {
        this.orderForm.bandWidth = 3000
        this.orderData.bandWidth = 3000
    }

    /* 自定义mask文字颜色 */
    const customClassValue = document.getElementsByClassName('el-slider__marks-text')
    for (let i = 0; i < customClassValue.length; i++) {
        let value = customClassValue[i].innerHTML
        /* 去除Masks的单位(1000M => 1000) */
        value = value.substring(0, value.length - 1)

        /* 当滑块的值大于mask时改变颜色 */
        if (val >= value) {
            customClassValue[i].style.color = '#FFFFFF'
        } else {
            customClassValue[i].style.color = '#717171'
        }
    }

    /* Tooltip增加单位 */
    return val + 'M'
}

3、修改全局样式（为了不影响其他页面使用原生样式，本示例只修改了el-form表单下的slider样式）

.el-form-item__content {
  .el-slider {
    .el-slider__input {
      margin-top: 0;
    }
    .el-slider__runway {
      height: 32px;
      margin-top: 0;
      margin-bottom: 0 !important;
      background-color: #FFFFFF;
      border: 1px solid #DCDFE6;
      .el-slider__bar {
        height: 31px;
      }
      .el-slider__button-wrapper {
        top: 0;
        height: 32px;
        .el-slider__button {
          width: 4px;
          height: 31px;
          border-radius: 0;
          background: #FFFFFF;
          border: solid 2px #0068A5;
        }
      }
      .el-slider__stop {
        width: 1px;
        height: 31px;
        border-radius: 0;
        background-color: #DCDFE6;
      }
      .el-slider__marks-text {
        color: #717171;
        margin-top: 0;
        transform: translateX(-115%);
      }
    }
  }
}