#header-mark#
Slider 滑块
通过拖动滑块在一个固定区间内进行选择
基础用法
在拖动滑块时，显示当前值
通过设置绑定值自定义滑块的初始值。continuous_update 表示滑动过程中是否持续发送更新事件。
范围选择
你还可以选择一个范围值
配置 range 属性以激活范围选择模式，该属性的绑定值是一个数组，由最小边界值和最大边界值组成。
垂直模式
默认情况下，方向 direction 为 水平 horizontal。 通过设置 direction 为 vertical 来让 Slider 在垂直方向上显示。
显示标记
设置 options 属性可以在滑块上显示标记。
TIP
v-model 或初始值必须是 options 中的值。
格式化展示
对于数值的展示可以使用 format 来格式化。
提示信息
通过 tooltip 属性在鼠标 hover 标签时展示提示信息。
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model/value | 选中项绑定值 | int|float|list | — |
| min | 允许的最小值 | int|float | -inf |
| max | 允许的最大值 | int|float | inf |
| step | 步进 | int|float | inf |
| options | 可选项 | list[ | — |
| disabled | 按钮是否为禁用状态 | boolean | false |
| description | 标签文字 | str | — |
| continuous_update | 滑动过程中是否持续发送更新事件 | boolean | false |
| readout | 否是显示当前值 | boolean | true |
| readout_format | 数据展示格式化 | str | — |
| range | 是否开启选择范围 | boolean | false |
| vertical | 是否为垂直排列 | boolean | false |
| tooltip | 提示信息 | str | — |
| style | 自定义css样式 | str | - |
TIP
style 支持的其它css属性
Sizes相关
- height
- width
- max_height
- max_width
- min_height
- min_width
Display相关
- visibility
- display
- overflow
Box model相关
- border
- margin
- padding
Positioning相关
- top
- left
- bottom
- right
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 当绑定值变化时触发的事件 | Callable |
方法
| 属性名 | 说明 | 类型 |
|---|---|---|
| index | 选中项的索引 | int|list |
| label | 选中项的标签 | int|float|list |
| value | 选中项的值 | int|float|list |
src/examples/ipywui/component/slider