Element-uiel-slider滑块自定义样式,实时显示选两点的数值在上方,左右显示0到100
效果图:
<el-slider class="slider"
:max="100"
v-model="value1"
range
:marks="marks">
</el-slider>
用计算属性来实现展示两个选中的数值
data(){
return{
value1: [25, 52],
}
},
computed:{
marks(){
let t = {}
t[this.value1[0]] = {
style:{ color: '#fff' ,fontSize: '18px'},
label: `${this.value1[0]}%`
}
t[this.value1[1]] = {
style:{ color: '#fff' },
label: `${this.value1[1]}%`
}
return t
},
}
CSS:(先缩短整个的宽度,再在两头加上0%和100%)
.slider{
width: calc(100% - 128px);
margin: 52px auto 16px;
&::before{
content: '0%';
position: absolute;
left: 32px;
top: 58px;
}
&::after{
content: '100%';
position: absolute;
right: 16px;
top: 58px;
}
}
CSS:改颜色
::v-deep .el-slider__bar{
background-image: linear-gradient(to right, blue, cyan);
}
::v-deep .el-slider__runway{
background-color: cyan;
}
CSS:把两个选中的数值移上去,同时如果不加white-space:nowrap;的话,拉到最后面会显示溢出而自动换行
::v-deep .el-slider__marks-text {
margin-top: -128px;
white-space:nowrap;
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeibfg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01