Slider 滑块

优质

小牛编辑

120浏览

2023-12-01

通过拖动滑块在一个固定区间内进行选择

基础用法

在拖动滑块时，显示当前值

<!--你可以为 model 绑定布尔变量-->
<!--或者通过绑定 (modelChange)=handle 来获得每次值改变的触发-->
<el-slider (modelChange)="handle($event)">
</el-slider>

<el-slider [model]="50">
</el-slider>

不显示数字提示

<el-slider [show-tooltip]="false">
</el-slider>

手动设置最小值与最大值

<el-slider [min]="10" [max]="50">
</el-slider>

<el-slider [vertical]="true" [vertical-height]="200">
</el-slider>

参数	说明	类型	默认值
model	初始值，必须在最小值与最大值之间	number
min	最小值	number	0
max	最大值	number	100
elDisabled	禁用整个滑块组件	boolean
show-tooltip	显示提示框体	boolean	1
format-tooltip	提示框数值格式化，函数，接受参数为每次变化的数值，需要返回一个用于显示的字符串	function
vertical	是否竖向模式	boolean
vertical-height	Slider 高度，竖向模式时必填，单位 px	number	200