amis/docs/zh-CN/components/form/input-range.md

title	description	type	group	menuName	icon	order
InputRange 滑块		0	null	InputRange 范围		38

可以用于选择单个数值或数值范围。

基本用法

默认是单个数值，结果是个整数。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "value": 20
        }
    ]
}

选择范围

对于范围的渲染，结果将是个字符串，两个数值通过分隔符来隔开。

{
    "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。

{
    "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禁用滑块。

{
    "type": "form",
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "value": 10,
            "disabled": true,
            "showInput": true,
            "clearable": true
        }
    ]
}

显示步长

开启showSteps可显示每个step长度

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "max": 10,
            "showSteps": true
        }
    ]
}

分割块数

通过parts可对整个滑动条平均分为parts块。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "label": '滑块',
            "name": 'range',
            "showSteps": true,
            "parts": 20
        }
    ]
}

刻度标记

通过marks可对刻度进行自定义。

{
    "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会展示输入框，输入框数据于滑块数据同步。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "value": 20,
            "showInput": true
        }
    ]
}

{
    "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可对数据进行清除。

{
    "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可指定标签展示的位置。

{
    "type": "form",
    "debug": true,
    "api": "/api/mock2/form/saveForm",
    "body": [
        {
            "type": "input-range",
            "name": "range",
            "label": "range",
            "value": 20,
            "tooltipVisible": true,
            "tooltipPlacement": "right"
        }
    ]
}

属性表

当做选择器表单项使用时，除了支持 普通表单项属性表 中的配置以外，还支持下面一些配置

属性名	类型	默认值	说明
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 触发时机一致，把当前值作为参数传入

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细请查看事件动作。

[name]表示当前组件绑定的名称，即name属性，如果没有配置name属性，则通过value取值。

事件名称	事件参数	说明
change	[name]: number | string |{min: number, max: number} 组件的值	当值变化时触发的事件
blur	[name]: number | string |{min: number, max: number} 组件的值	当设置 showInput 为 true 时，输入框失去焦点时触发
focus	[name]: number | string |{min: number, max: number} 组件的值	当设置 showInput 为 true 时，输入框获取焦点时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称	动作配置	说明
clear	-	清除输入框 前置条件：showInput 和 clearable 都为 true
reset	-	将值重置为resetValue，若没有配置resetValue，则清空
setValue	value: number | string | {min: number, max: number} 更新的值	更新数据