【Element-ui】el-slider滑块自定义样式，实时显示选中两点的数值在上方，左右显示0到100

效果图：

<el-slider class="slider"
      :max="100"
      v-model="value1"
       range
       :marks="marks">
</el-slider>
1
2
3
4
5
6

用计算属性来实现展示两个选中的数值

		data(){
	        return{
				value1: [25, 52],
				}
		},
		computed:{
			marks(){
	            let t = {}
	            t[this.value1[0]] = {
	                style:{ color: '#fff' ,fontSize: '18px'},
	                label: `${this.value1[0]}%`
	            }
	            t[this.value1[1]] = {
	                style:{ color: '#fff' },
	                label: `${this.value1[1]}%`
	            }
	            return t
	        },
		}
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

CSS：（先缩短整个的宽度，再在两头加上0%和100%）

.slider{
    width: calc(100% - 128px);
    margin: 52px auto 16px;
    &::before{
        content: '0%';
        position: absolute;
        left: 32px;
        top: 58px;
    }
    &::after{
        content: '100%';
        position: absolute;
        right: 16px;
        top: 58px;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

CSS：改颜色

::v-deep .el-slider__bar{
    background-image: linear-gradient(to right, blue, cyan);
}
::v-deep .el-slider__runway{
    background-color: cyan;
}
1
2
3
4
5
6

CSS：把两个选中的数值移上去，同时如果不加white-space:nowrap;的话，拉到最后面会显示溢出而自动换行

::v-deep .el-slider__marks-text {
    margin-top: -128px;
    white-space:nowrap;
}
1
2
3
4