<el-slider class="slider"
  :max="100"
  v-model="value1"
  range
  :marks="marks">
</el-slider>

用计算属性来实现展示两个选中的数值： 
computer: 
    data(){      // 表示数据范围
	  return{
	    value1: [25, 52],
	  }
	},
 computer: {
    marks() {
       let t = {},
       t[thi.value1[0]] = {
          style: { color: 'fff', fontSize: '18px'}, 
          label:  `$this.value[0]%`
       }
       t[this.value[1]] = {
         style: { color: '#fff' },
         label: `${this.value[1]}%`
       }
       return t;
    }

 }

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;
   }
}

CSS：改颜色

::v-deep .el-slider__bar{
    background-image: linear-gradient(to right, blue, cyan);
}
::v-deep .el-slider__runway{
    background-color: cyan;
}

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

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