范围滑块组件
范围滑块（Range slider）允许用户通过移动滑块旋钮从一系列值中进行选择。默认情况下，一个旋钮控制范围的值。此行为可以使用双旋钮进行自定义。
默认情况下，范围滑块的最小值为 0，最大值为 100。这可以通过 min 和 max 属性进行配置。
标签
标签应用于描述范围。它们可以视觉上使用，并且当用户聚焦在范围上时，屏幕阅读器也会读出它们。这使用户易于理解范围的意图。Range 有几种分配标签的方式：
label属性：用于纯文本标签label插槽：用于自定义 HTML 标签aria-label：用于为屏幕阅读器提供标签，但不添加可见标签
标签位置
下面的示例展示了如何使用 labelPlacement 属性来更改标签相对于范围的位置。虽然这里使用了 label 属性，但 labelPlacement 也可以与 label 插槽一起使用。
标签插槽
虽然纯文本标签应通过 label 属性传入，但如果需要自定义 HTML，则可以通过 label 插槽传入。
无可见标签
如果不需要可见标签，开发人员仍应提供 aria-label，以便屏幕阅读器可以访问范围。
装饰元素
装饰性元素可以传递到范围的 start 或 end 插槽中。这对于添加图标（例如低音量或高音量图标）很有用。由于这些元素是装饰性的，它们不应被屏幕阅读器等辅助技术宣布。
如果文档的方向性设置为从左到右，则插入到 start 位置的内容将显示在范围的左侧，而插入到 end 位置的内容将显示在范围的右侧。在从右到左（rtl）的方向性中，插入到 start 位置的内容将显示在范围的右侧，而插入到 end 位置的内容将显示在范围的左侧。
双旋钮
双旋钮引入了两个旋钮控件，用户可以使用它们来选择下限和上限的值。选择后，Range 将发出一个包含所选上限和下限值的 ionChange 事件，其类型为 RangeValue。
数值提示
pin 属性将在拖动旋钮时在旋钮上方显示 Range 的值。这允许用户在 Range 中选择特定值。
通过 pinFormatter 函数，开发人员可以自定义范围值对用户的格式。
吸附与刻度
刻度显示 Range 上每个可用值的指示。为了使用刻度，开发人员必须将 snaps 和 ticks 属性都设置为 true。
启用吸附后，Range 旋钮将在拖动和释放时吸附到最近的可用值。
事件处理
使用 ionChange
当 Range 旋钮值更改时，会发出 ionChange 事件。
ConsoleConsole messages will appear here when logged from the example above.使用 ionKnobMoveStart 和 ionKnobMoveEnd
当 Range 旋钮开始拖动时（无论是通过鼠标拖动、触摸手势还是键盘交互），会发出 ionKnobMoveStart 事件。相反，当 Range 旋钮释放时，会发出 ionKnobMoveEnd 事件。两个事件都使用 RangeValue 类型发出，并与 dualKnobs 属性结合使用。
ConsoleConsole messages will appear here when logged from the example above.主题化
CSS 自定义属性
Range 包含 CSS 变量，可以快速主题化和自定义 Range 组件的外观，以匹配您应用程序的设计。
CSS 阴影部件
Range 包含 CSS 阴影部件，以允许完全自定义 Range 组件内的特定元素节点。CSS 阴影部件提供了最多的自定义功能，是在需要对 Range 组件进行高级样式设置时的推荐方法。
当启用 dualKnobs 时，会暴露额外的阴影部件，以允许每个旋钮独立设置样式。这些部件以两种形式提供：静态标识部件（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
| Description | 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. |
| Attribute | active-bar-start |
| Type | number ｜ undefined |
| Default | undefined |
color
| Description | 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. |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
debounce
| Description | How long, in milliseconds, to wait to trigger the ionInput event after each change in the range value. |
| Attribute | debounce |
| Type | number ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the user cannot interact with the range. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
dualKnobs
| Description | Show two knobs. |
| Attribute | dual-knobs |
| Type | boolean |
| Default | false |
label
| Description | 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. |
| Attribute | label |
| Type | string ｜ undefined |
| Default | undefined |
labelPlacement
| Description | 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. |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
max
| Description | Maximum integer value of the range. |
| Attribute | max |
| Type | number |
| Default | 100 |
min
| Description | Minimum integer value of the range. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | min |
| Type | number |
| Default | 0 |
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | The name of the control, which is submitted with the form data. |
| Attribute | name |
| Type | string |
| Default | this.rangeId |
pin
| Description | If true, a pin with integer value is shown when the knob is pressed. |
| Attribute | pin |
| Type | boolean |
| Default | false |
pinFormatter
| Description | 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. |
| Attribute | undefined |
| Type | (value: number) => string ｜ number |
| Default | (value: number): number => Math.round(value) |
snaps
| Description | If true, the knob snaps to tick marks evenly spaced based on the step property value. |
| Attribute | snaps |
| Type | boolean |
| Default | false |
step
| Description | Specifies the value granularity. |
| Attribute | step |
| Type | number |
| Default | 1 |
ticks
| Description | If true, tick marks are displayed based on the step value. Only applies when snaps is true. |
| Attribute | ticks |
| Type | boolean |
| Default | true |
value
| Description | the value of the range. |
| Attribute | value |
| Type | number ｜ { lower: number; upper: number; } |
| Default | 0 |
事件
| Name | Description | Bubbles |
|---|---|---|
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 arrowsThis 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 |
方法
No public methods available for this component.
CSS 阴影部件
| Name | Description |
|---|---|
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 自定义属性
- iOS
- MD
| Name | Description |
|---|---|
--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 | Description |
|---|---|
--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 | Description |
|---|---|
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. |