elementui自定义Slider样式

• 先看效果图
  

• 自定义两个内容：

  • 提示信息一直显示
  • 自定义间断点样式

• 代码如下

<template>
    <div class="content">
        <div class="my-slider">
            <div class="my-slider__tooltip" :style="style">
                <el-button
                    class="my-slider__tooltip-wrapper"
                    size="mini"
                    type="text"
                >
                    {{ curTime }}
                </el-button>
            </div>
            <el-slider v-model="value" :min="min" :max="max" :show-tooltip="false" @input="onlyChangeTime" :marks="setMarker"></el-slider>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    data(){
        return {
            value:0,//model
            min:0,//最小值
            max:3600,//最大值
            timeData:[],//数据list
            curTime:''//上方tip展示
        }
    },
    created(){
        // 模拟一小时数据
        var today = moment().format("YYYY-MM-DD")+" 00:00:00";
        var start = new Date(today).getTime();
        var timeRange = [];
        for(var i=0;i<=3600;i++){
            timeRange.push(start+i*1000)
        }
        this.timeData = timeRange;
    },
    computed:{
        // 时间轴的点
        setMarker() {
            // 模拟每300个点加分割线
            let marks = {};
            for (let i = 0; i <= 3600; i++) {
                if (i % 300 == 0) {
                    marks[i] = {
                        label: this.$createElement('span', moment(this.timeData[i]).format("HH:mm:ss"))
                    };
                }
            }
            return marks;
        },
        // tip距离左侧百分比
        style() {
            let length = this.max - this.min;
            let progress = this.value - this.min;
            let left = length == 0?0:progress / length * 100;
            return {
                paddingLeft: `${left}%`,
            }
        },
    },
    methods:{
        //拖拽进度条修改时间
        onlyChangeTime(v) {
            this.curTime = moment(this.timeData[v]).format("HH:mm:ss");
        }
    }
}
</script>
<style lang="less">
.content{
    color: #fff;
    background: rgba(26,37,58,0.5);

}
.my-slider{
    position: relative;
    width: calc(100% - 400px);
    height: 160px;
    margin: 0 auto;
    font-size: 12px;
    .my-slider__tooltip {
        text-align: left;
        position: absolute;
        top: 16px;
        left: -20px;
        .my-slider__tooltip-wrapper {
            height: 32px;
            background: transparent;
            border: none;
            color: #fff;
            cursor: unset;
        }
    }
}
.el-slider{
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    top: 60px;
}
.el-slider__runway{
    background-color: #fff;
}
.el-slider__bar{
    background: rgba(150,221,105,1);
}
.el-slider__button{
    border:2px solid  rgba(150,221,105,1);
    background:  rgba(150,221,105,1);
}
.el-slider__stop{
    visibility: hidden;
}
.el-slider__button-wrapper{
    position: relative;
    top: -6px;
    &::after{
        content: '';
        width: 1px;
        height: 36px;
        position: absolute;
        top: -30px;
        left: 18px;
        border-right: 1px solid #96DD69;
    }
}
.el-slider__marks-text {
    margin-top: -4px;
    transform: translateX(0);
    &::after{
        content: '';
        width: 1px;
        height: 24px;
        position: absolute;
        top: -40px;
        left: -2px;
        border-right: 1px solid #fff;
    }
	span{
        position: absolute;
        left: -26px;
        color: #fff;
	}
}
</style>