实现代码：

<template>
  <div>
    <el-slider style="padding: 10px 50px;" v-model="value" :marks="marks" :max="max" disabled>
    </el-slider>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: [],
  data() {
    return {
      marks: {
        0: 'VIP1',
        0.001: '0',
        2: 'VIP2',
        2.001: '2',
        3: 'VIP3',
        3.001: '3',
        4: 'VIP4',
        4.001: '4',
        5: 'VIP5',
        5.001: '5',
        6: 'VIP6',
        6.001: '6',
        7: 'VIP7',
        7.001: '7',
      },
      max: 4.001,
      value: 4,
    }
  },
  mounted() {},
  methods: {},
}
</script>
<style lang='scss' scoped>
::v-deep .el-slider__runway.disabled .el-slider__bar {
  background-color: #ffa940;
}
::v-deep .el-slider__stop {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  border: solid 2px #ffa940;
  transform: translateX(-50%) translateY(-25%);
}
::v-deep .el-slider__stop:nth-child(2n) {
  display: none;
}
::v-deep .el-slider__marks .el-slider__marks-text:nth-child(2n-1) {
  color: #333333;
  font-weight: bold;
}
::v-deep .el-slider__marks .el-slider__marks-text:nth-child(2n) {
  color: #666666;
  font-size: 14px;
  transform: translateX(-70%) translateY(-180%);
}
</style>

效果：

原理：设置7对数据，利用css样式调整布局，看起来就像是只有7个等级一样。