版本：v8

ion-range

范围滑块允许用户通过移动滑块旋钮从一系列值中进行选择。默认情况下，一个旋钮控制范围的值。此行为可以通过双旋钮进行自定义。

默认情况下，范围滑块的最小值为 0，最大值为 100。这可以通过 min 和 max 属性进行配置。

装饰

装饰性元素可以通过范围的 start 或 end 插槽传入。这对于添加图标（如低音量或高音量图标）非常有用。由于这些元素是装饰性的，它们不应被屏幕阅读器等辅助技术播报。

如果文档的方向设置为从左到右，则放入 start 位置的插槽内容将显示在范围的左侧，而放入 end 位置的插槽内容将显示在范围的右侧。在从右到左（rtl）的方向中，放入 start 位置的插槽内容将显示在范围的右侧，而放入 end 位置的插槽内容将显示在范围的左侧。

双旋钮

双旋钮引入了两个旋钮控件，用户可以使用它们在上下边界之间选择值。选中后，Range 将发出一个 ionChange 事件，其中包含一个 RangeValue，包含选中的上限和下限值。

大头针

pin 属性将在拖动时在旋钮上方显示 Range 的值。这允许用户在范围内选择特定的值。

使用 pinFormatter 函数，开发者可以自定义向用户显示的范围值格式。

吸附和刻度

刻度显示 Range 上每个可用值的指示标记。为了使用刻度，开发者必须将 snaps 和 ticks 属性都设置为 true。

启用吸附后，Range 旋钮在拖动和释放时将吸附到最近的可用值。

事件处理

使用 `ionChange`

ionChange 事件在 Range 旋钮值发生变化时触发。

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

使用 `ionKnobMoveStart` 和 `ionKnobMoveEnd`

ionKnobMoveStart 事件在 Range 旋钮开始拖动时触发，无论是通过鼠标拖拽、触摸手势还是键盘交互。相反，ionKnobMoveEnd 在 Range 旋钮释放时触发。两个事件都以 RangeValue 类型触发，并与 dualKnobs 属性配合使用。

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

主题

CSS 自定义属性

Range 包含 CSS 变量，可快速设置主题并自定义 Range 组件的外观以匹配您的应用设计。

CSS Shadow Parts

Range 包含 CSS 阴影部分，允许完全自定义 Range 组件中的特定元素节点。CSS 阴影部分提供最大的自定义能力，是在需要对 Range 组件进行高级样式设计时的推荐方法。

当启用 dualKnobs 时，会暴露额外的 Shadow Parts，允许每个旋钮独立设置样式。这些有两种形式：静态标识部分（A 和 B）和动态位置部分（lower 和 upper）。A 和 B 部分始终指向相同的物理旋钮，即使旋钮交叉。相比之下，lower 和 upper 部分反映当前值位置，并在旋钮交叉时自动交换。这样可以通过一致的标识或范围内的相对值进行样式设计。

接口

RangeChangeEventDetail

interface RangeChangeEventDetail {
  value: RangeValue;
}

RangeKnobMoveStartEventDetail

interface RangeKnobMoveStartEventDetail {
  value: RangeValue;
}

RangeKnobMoveEndEventDetail

interface RangeKnobMoveEndEventDetail {
  value: RangeValue;
}

RangeCustomEvent

虽然不是必需的，但此接口可以替代 CustomEvent 接口，为此组件发出的 Ionic 事件提供更强的类型支持。

interface RangeCustomEvent extends CustomEvent {
  detail: RangeChangeEventDetail;
  target: HTMLIonRangeElement;
}

类型

RangeValue

type RangeValue = number | { lower: number, upper: number };

属性

activeBarStart

说明	The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
属性	`active-bar-start`
类型	`number ｜ undefined`
默认值	`undefined`

color

说明	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.
属性	`color`
类型	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined`
默认值	`undefined`

debounce

说明	How long, in milliseconds, to wait to trigger the `ionInput` event after each change in the range value.
属性	`debounce`
类型	`number ｜ undefined`
默认值	`undefined`

disabled

说明	If `true`, the user cannot interact with the range.
属性	`disabled`
类型	`boolean`
默认值	`false`

dualKnobs

说明	Show two knobs.
属性	`dual-knobs`
类型	`boolean`
默认值	`false`

label

说明	The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
属性	`label`
类型	`string ｜ undefined`
默认值	`undefined`

labelPlacement

说明	Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
属性	`label-placement`
类型	`"end" ｜ "fixed" ｜ "stacked" ｜ "start"`
默认值	`'start'`

max

说明	Maximum integer value of the range.
属性	`max`
类型	`number`
默认值	`100`

min

说明	Minimum integer value of the range. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	`min`
类型	`number`
默认值	`0`

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	`mode`
类型	`"ios" ｜ "md"`
默认值	`undefined`

name

说明	The name of the control, which is submitted with the form data.
属性	`name`
类型	`string`
默认值	`this.rangeId`

说明	If `true`, a pin with integer value is shown when the knob is pressed.
属性	`pin`
类型	`boolean`
默认值	`false`

pinFormatter

说明	A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
属性	`undefined`
类型	`(value: number) => string ｜ number`
默认值	`(value: number): number => Math.round(value)`

snaps

说明	If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
属性	`snaps`
类型	`boolean`
默认值	`false`

step

说明	Specifies the value granularity.
属性	`step`
类型	`number`
默认值	`1`

ticks

说明	If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
属性	`ticks`
类型	`boolean`
默认值	`true`

value

说明	the value of the range.
属性	`value`
类型	`number ｜ { lower: number; upper: number; }`
默认值	`0`

事件

Name	说明	冒泡
`ionBlur`	Emitted when the range loses focus.	`true`
`ionChange`	The `ionChange` event is fired for `<ion-range>` elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows This event will not emit when programmatically setting the `value` property.	`true`
`ionFocus`	Emitted when the range has focus.	`true`
`ionInput`	The `ionInput` event is fired for `<ion-range>` elements when the value is modified. Unlike `ionChange`, `ionInput` is fired continuously while the user is dragging the knob.	`true`
`ionKnobMoveEnd`	Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.	`true`
`ionKnobMoveStart`	Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.	`true`

方法

该组件没有可用的公共方法。

CSS Shadow Parts

Name	说明
`activated`	Added to the knob-handle, knob, and pin when the knob is active. Only one set has this part at a time when `dualKnobs` is `true`.
`bar`	The inactive part of the bar.
`bar-active`	The active part of the bar.
`focused`	Added to the knob-handle, knob, and pin that currently has focus. Only one set has this part at a time when `dualKnobs` is `true`.
`hover`	Added to the knob-handle, knob, and pin when the knob has hover. Only one set has this part at a time when `dualKnobs` is `true`.
`knob`	The visual knob element on the range track.
`knob-a`	The visual knob for the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
`knob-b`	The visual knob for the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
`knob-handle`	The container that wraps the knob and handles drag interactions.
`knob-handle-a`	The container for the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
`knob-handle-b`	The container for the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
`knob-handle-lower`	The container for the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
`knob-handle-upper`	The container for the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob handle they refer to when the knobs cross.
`knob-lower`	The visual knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
`knob-upper`	The visual knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which knob they refer to when the knobs cross.
`label`	The label text describing the range.
`pin`	The value indicator displayed above a knob.
`pin-a`	The value indicator above the knob with the static `A` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
`pin-b`	The value indicator above the knob with the static `B` identity when `dualKnobs` is `true`. This identity does not change, even if the knobs cross and swap which one represents the lower or upper value.
`pin-lower`	The value indicator above the knob whose current `value` is `lower` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
`pin-upper`	The value indicator above the knob whose current `value` is `upper` when `dualKnobs` is `true`. The lower and upper parts swap which pin they refer to when the knobs cross.
`pressed`	Added to the knob-handle, knob, and pin that is currently being pressed to drag. Only one set has this part at a time when `dualKnobs` is `true`.
`tick`	An inactive tick mark.
`tick-active`	An active tick mark.

CSS 自定义属性

Name	说明
`--bar-background`	Background of the range bar
`--bar-background-active`	Background of the active range bar
`--bar-border-radius`	Border radius of the range bar
`--bar-height`	Height of the range bar
`--height`	Height of the range
`--knob-background`	Background of the range knob
`--knob-border-radius`	Border radius of the range knob
`--knob-box-shadow`	Box shadow of the range knob
`--knob-size`	Size of the range knob
`--pin-background`	Background of the range pin (only available in MD mode)
`--pin-color`	Color of the range pin (only available in MD mode)

Name	说明
`--bar-background`	Background of the range bar
`--bar-background-active`	Background of the active range bar
`--bar-border-radius`	Border radius of the range bar
`--bar-height`	Height of the range bar
`--height`	Height of the range
`--knob-background`	Background of the range knob
`--knob-border-radius`	Border radius of the range knob
`--knob-box-shadow`	Box shadow of the range knob
`--knob-size`	Size of the range knob
`--pin-background`	Background of the range pin (only available in MD mode)
`--pin-color`	Color of the range pin (only available in MD mode)

插槽

Name	说明
`end`	Content is placed to the right of the range slider in LTR, and to the left in RTL.
`label`	The label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
`start`	Content is placed to the left of the range slider in LTR, and to the right in RTL.

标签​

标签位置​

标签插槽​

无可见标签​

装饰​

双旋钮​

大头针​

吸附和刻度​

事件处理​

使用 ionChange​

使用 ionKnobMoveStart 和 ionKnobMoveEnd​

主题​

CSS 自定义属性​

CSS Shadow Parts​

接口​

RangeChangeEventDetail​

RangeKnobMoveStartEventDetail​

RangeKnobMoveEndEventDetail​

RangeCustomEvent​

类型​

RangeValue​

属性​

activeBarStart​

color​

debounce​

disabled​

dualKnobs​

label​

labelPlacement​

max​

min​

mode​

name​

pin​

pinFormatter​

snaps​

step​

ticks​

value​

事件​

方法​

CSS Shadow Parts​

CSS 自定义属性​

插槽​

目录

标签

标签位置

标签插槽

无可见标签

装饰

双旋钮

大头针

吸附和刻度

事件处理

使用 `ionChange`

使用 `ionKnobMoveStart` 和 `ionKnobMoveEnd`

主题

CSS 自定义属性

CSS Shadow Parts

接口

RangeChangeEventDetail

RangeKnobMoveStartEventDetail

RangeKnobMoveEndEventDetail

RangeCustomEvent

类型

RangeValue

属性

activeBarStart

color

debounce

disabled

dualKnobs

label

labelPlacement

max

min

mode

name

pin

pinFormatter

snaps

step

ticks

value

事件

方法

CSS Shadow Parts

CSS 自定义属性

插槽