Mint UI参考手册
JS组件 | JS Components
滑块 | Range
滑块,支持自定义步长、区间等。
引入
import { Range } from 'mint-ui';
Vue.component(Range.name, Range);
例子
将一个本地变量与 range
的 value
属性同步即可实现双向绑定
<mt-range v-model="rangeValue"></mt-range>
更多的配置项
<mt-range
v-model="rangeValue"
:min="10"
:max="90"
:step="10"
:bar-height="5">
</mt-range>
可在滑块两侧显示文字
<mt-range v-model="rangeValue">
<div slot="start">0</div>
<div slot="end">100</div>
</mt-range>
API
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
value |
滑块的值 |
Number |
||
min |
最小值 |
Number |
0 |
|
max |
最大值 |
Number |
100 |
|
step |
步长 |
Number |
1 |
|
disabled |
是否禁用 |
Boolean |
false |
|
barHeight |
滑槽的线宽(像素) |
Number |
1 |
Slot
name |
描述 |
---|---|
start |
滑块左侧 DOM |
end |
滑块右侧 DOM |