带有刻度的el-slider功能/el-slider加粗功能

效果如下:
在这里插入图片描述

html

	<el-slider
	   class="self_slider"
	   v-model="guideRail"
	   :min="0"
	   :max="160"
	   show-input
	   :marks="guideMarks"
	 ></el-slider>

computed

  computed: {
    
    
    guideMarks() {
    
    
      let marks = {
    
    };
      for (let i = 0; i <= 160; i++) {
    
    
        if (i % 10 == 0) {
    
    
          marks[i] = i + "";
        } else if (i % 2 == 0) {
    
    
          marks[i] = {
    
    
            style: {
    
    
              color: "#ccc",
            },
            label: this.$createElement("span", "|"),
          };
        }
      }
      return marks;
    },
  },

css

.el-slider__marks-text {
    
    
  top: 20px;
  span {
    
    
    display: inline-block;
    height: 8px !important;
    overflow: hidden;
  }
}
.el-slider__runway {
    
    
  height: 30px;
  .el-slider__bar {
    
    
    height: 30px;
  }
  .el-slider__button-wrapper {
    
    
    top: -2px;
  }
}
.el-slider__stop {
    
    
  display: none;
}

猜你喜欢

转载自blog.csdn.net/weixin_37064409/article/details/106920288