简单封装el-slider，根据接收的颜色数组，使用css的var()函数动态设置滑块的边框色和条的背景色

基础用法

<template>  
    <slider-component :if-preview="false"  
                      :init-val="initVal"  
                      @getNewValueFn="val=>initVal=val"  
                      :marks="marks"  
                      :step-color="stepColor"  
                      class="sliderStyle"  
                      :max="5"/>
</template>

<script>  
export default {  
    data() {  
        return {  
            initVal: 0,  
            marks: {  
                0: '0',  
                1: '1',  
                2: '2',  
                3: '3',  
                4: '4',  
                5: '5'  
            },  
            stepColor: ['#409eff', '#409eff', '#6383f6', '#7568ee', '#8147e5', '#870fdc']  
        }  
    }  
}
</script>

属性

/**
 * 初始值
 */
initVal: {
    type: Number,
    default: 0
}

/**
 * 是否禁用
 */
ifPreview: {
    type: Boolean,
    default: false
}

/**
 * 间断的颜色数组，长度为marks的key数量
 */
stepColor: {
    type: Array,
    default() {
        return []
    }
}

/**  
* 最小值  
*/  
min: {  
    type: Number,  
    default: 0  
}

/**
 * 最大值
 */
max: {
    type: Number,
    default: 100
}

/**
 * 标记，key的类型必须为number且取值在闭区间[0, max]内，每个标记可以单独设置样式
 */
marks: null

事件

/**  
* 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）  
* 回调参数：val：绑定值  
*/  
'getNewValueFn'

源代码

github.com/fcfcfc/tool…
组件可直接使用，或根据自己的需求自行修改。如有任何问题或新的需求，请及时联系我，看到后会第一时间回复。就这！