首先放上效果图
为了方便使用,直接改造下elementUI的,Slider 滑块
全部代码,这里可直接使用的插件:
<template>
<div class="block">
<div class="unit">10.2℃</div>
<div>
<el-slider v-model="value" vertical height="200px" :marks="marks">
</el-slider>
<div class="bit"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: 60,
marks: {
0: "0",
25: "25",
50: "50",
75: "75",
100: " 100",
},
};
},
};
</script>
<style lang="less" scoped>
.block {
display: flex;
align-items: center;
.unit {
width: 60px;
height: 16px;
font-size: 18px;
font-family: Adobe Heiti Std;
font-weight: bold;
color: #03e9f7;
margin-right: 26px;
}
.bit {
width: 23px;
height: 25px;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#3fbbfe),
to(#a541ff)
);
background: linear-gradient(180deg, #3fbbfe, #a541ff);
border: 1px solid #29458e;
border-radius: 50%;
margin: -3px 6px;
}
}
/deep/.el-slider.is-vertical .el-slider__marks-text {
left: 37px;
}
/deep/.el-slider__bar {
background: linear-gradient(180deg, #ff1212, #43b6fe);
}
/deep/.el-slider__runway {
width: 100%;
margin: 16px 0;
background-color: #29458e;
border-radius: 3px;
position: relative;
cursor: pointer;
vertical-align: middle;
}
/deep/.el-slider__marks-text {
color: #fff;
}
/deep/.el-slider__stop {
height: 2px;
width: 17px;
margin-left: 11px;
border-radius: 0;
background-color: #43b6fe;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/deep/.el-slider__button {
border: none;
background-color: transparent;
}
</style>