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	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 触发时机一致，把当前值作为参数传入