帶有刻度的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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章