---
title: InputRange 滑块
description:
type: 0
group: null
menuName: InputRange 范围
icon:
order: 38
---
可以用于选择单个数值或数值范围。
## 基本用法
默认是单个数值，结果是个整数。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"label": '滑块',
"name": 'range',
"value": 20
}
]
}
```
## 选择范围
对于范围的渲染，结果将是个字符串，两个数值通过分隔符来隔开。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"label": "range",
"multiple": true,
"value": {
"min": 10,
"max": 50
}
}
]
}
```
## 控制调整的粒度
使用 `step` 可以控制调整粒度，默认是 1。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"min": 0,
"max": 1,
"step": 0.01,
"label": "range"
}
]
}
```
## 禁用
使用`disabled`禁用滑块。
```schema: scope="body"
{
"type": "form",
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"label": '滑块',
"name": 'range',
"value": 10,
"disabled": true,
"showInput": true,
"clearable": true
}
]
}
```
## 显示步长
开启`showSteps`可显示每个`step`长度
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"label": '滑块',
"name": 'range',
"max": 10,
"showSteps": true
}
]
}
```
## 分割块数
通过`parts`可对整个滑动条平均分为`parts`块。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"label": '滑块',
"name": 'range',
"showSteps": true,
"parts": 20
}
]
}
```
## 刻度标记
通过`marks`可对刻度进行自定义。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"label": '滑块',
"name": 'range',
"parts": 5,
"marks": {
'0': '0',
'20%': '20Mbps',
'40%': '40Mbps',
'60%': '60Mbps',
'80%': '80Mbps',
'100': '100'
}
}
]
}
```
## 输入框
通过开启`showInput`会展示输入框，输入框数据于滑块数据同步。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"label": "range",
"value": 20,
"showInput": true
}
]
}
```
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"label": "range",
"multiple": true,
"value": [10, 20],
"showInput": true
}
]
}
```
## 清除输入
在打开`showInput`输入框的前提下，开启`clearable`可对数据进行清除。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"label": "range",
"value": 20,
"showInput": true,
"clearable": true
}
]
}
```
## 显示标签
标签默认在 hover 和拖拽过程中展示，通过`tooltipVisible`或者`tipFormatter`可指定标签是否展示。标签默认展示在滑块上方，通过`tooltipPlacement`可指定标签展示的位置。
```schema: scope="body"
{
"type": "form",
"debug": true,
"api": "/api/mock2/form/saveForm",
"body": [
{
"type": "input-range",
"name": "range",
"label": "range",
"value": 20,
"tooltipVisible": true,
"tooltipPlacement": "right"
}
]
}
```
## 属性表
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| className | `string` | | css 类名 |
| value | `number` or `string` or `{min: number, max: number}` or `[number, number]` | | |
| min | `number` | `0` | 最小值 |
| max | `number` | `100` | 最大值 |
| disabled | `boolean` | `false` | 是否禁用 |
| step | `number` | `1` | 步长 |
| showSteps | `boolean` | `false` | 是否显示步长 |
| parts | `number` or `number[]` | `1` | 分割的块数
主持数组传入分块的节点 |
| marks | { [number | string]: ReactNode } or { [number | string]: { style: CSSProperties, label: ReactNode } } | | 刻度标记
- 支持自定义样式
- 设置百分比 |
| tooltipVisible | `boolean` | `false` | 是否显示滑块标签 |
| tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置，默认`auto`，方向自适应
前置条件：tooltipVisible 不为 false 时有效 |
| tipFormatter | `function` | | 控制滑块标签显隐函数
前置条件：tooltipVisible 不为 false 时有效 |
| multiple | `boolean` | `false` | 支持选择范围 |
| joinValues | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交
前置条件：开启`multiple`时有效 |
| delimiter | `string` | `,` | 分隔符 |
| unit | `string` | | 单位 |
| clearable | `boolean` | `false` | 是否可清除
前置条件：开启`showInput`时有效 |
| showInput | `boolean` | `false` | 是否显示输入框 |
| onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 |
| onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
| -------- | ----------------------------------------------------------------- | ---------------------------------------------- |
| change | `value: number \| string \|{min: number, max: number}` 滑块当前值 | 当值变化时触发的事件 |
| blur | - | 输入框失去焦点
前置条件：showInput 为 true |
| focus | - | 输入框获取焦点
前置条件：showInput 为 true |
## 动作表
| 动作名称 | 动作配置 | 说明 |
| -------- | ---------------------------------------------------------------- | ---------------------------------------------------------- |
| clear | - | 清除输入框
前置条件：showInput 和 clearable 都为 true |
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| setValue | `value: number \| string \| {min: number, max: number}` 更新的值 | 更新数据 |