效果如下:
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;
}