Slider滑块实现进度条

简介: Slider滑块实现进度条

问题描述

在用vue做页面设计时,需要实现一些进度条功能,如视频、音频播放等。那么什么是slider滑块?如何用slider滑块实现进度条功能呢?


解决方案

slider滑块是Element UI中的一个组件,通过拖动滑块在一个固定区间内进行选择。主要是知道slider的属性,min:最小值,max最大值,step步长,注意取值必须大于0,还能被(max-min)整除。

<view>

<slider min="0" max="50" step="10" ></slider>

</view>

基本的样式设置,activeColor: 滑块左侧已选择部分的线条颜色,backgroundColor: 滑块右侧背景条的颜色,block-size: 滑块的大小, 取值范围为12 - 28block-color: 滑块的颜色。

<view>

<slider min="0" max="50" step="10" activeColor="#007AFF" block-size="15"block-color="#6f6f6f"backgroundColor="#8a858a"></slider>

</view>

@change: 完成一次拖动后触发的事件@changeing: 拖动过程中触发的事件,

<view>

<slider min="0" :max="50" @changing="onchanging" @change="onchange"block-size="10"backgroundColor="#8a858a"></slider>

</view>

效果图

 


结语

学习了slider滑块后,它是在一定的区间内进行滑动,可以实现音乐播放时的进度条,那么也可以应用于实现图片左右滑动,后续小编就试着去实现这一功能。


目录
相关文章
|
7月前
CSS3滑动轮播动画
CSS3滑动轮播动画
62 8
|
6月前
|
Java API Android开发
19. 【Android教程】进度条 ProgressBar
19. 【Android教程】进度条 ProgressBar
180 4
自定义scroll滑块样式
自定义scroll滑块样式
68 0
|
XML Java API
一个超简单的渐变平行四边形进度条
这个自定义View,其实就是一个简单的进度条,无非就是平行四边形形状的,加了渐变以及状态颜色的切换。
139 0
Qt之滑动条和进度条(QSlider、QProgressBar)
Qt之滑动条和进度条(QSlider、QProgressBar)
1933 1
|
Java API Android开发
ProgressBar(进度条)
本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用到进度条;或者当在进行一些比较 耗时的操作,需要等待一段较长的时间,这个时候如果没有提示,用户可能会以为程序Carsh或者手机死机 了,这样会大大降低用户体验,所以在需要进行耗时操作的地方,添加上进度条,让用户知道当前的程序 在执行中,也可以直观的告诉用户当前任务的执行进度等!使用进度条可以给我带来这样的便利!
121 0
|
移动开发 前端开发 JavaScript
Canvas之鼠标滑动特效
Canvas之鼠标滑动特效
243 0
Canvas之鼠标滑动特效
|
前端开发 JavaScript HTML5
html+css+js 快速打造进度条
html进度条在web播放器中很常见,之前html并没有进度条这个标签,html5后出了一个progress标签作为进度条,但是并不是很好用,那么接下来,我们将用css+html+js实现进度条效果,无需任何三方框架。
4610 0
|
前端开发
[译] 用 Flutter 打造一个圆形滑块(Slider)
大多数情况下你并不会需要它。但想象一下:如果你想要用户选定一个时间段,或者只是想要一个比直线形状更有趣一点的常规滑块的场景时,就可以使用圆形滑块。
2549 0