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

最新推荐文章于 2025-01-10 19:45:00 发布

yanhappyYY

最新推荐文章于 2025-01-10 19:45:00 发布

阅读量2.1k

点赞数 1

分类专栏： element-ui

本文链接：https://blog.csdn.net/weixin_37064409/article/details/106920288

版权

element-ui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Element UI库自定义滑块组件的方法，包括如何设置范围、标记和样式，以及实现动态显示数值和自定义标记样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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