ion-range

The Range slider lets users select from a range of values by moving the slider knob. By default one knob controls the value of the range. This behavior can be customized using dual knobs.

By default the Range slider has a minimum value of 0 and a maximum value of 100. This can be configured with the min and max properties.

Basic Usage​

Range Labels​

Labels and custom UI elements can be slotted on either side of the range by adding slot="start" or slot="end" to the element. The element can be any element, such as an ion-label, ion-icon or a div. If the directionality of the document is set to left to right, the contents slotted to the start position will display to the left of the range, where as contents slotted to the end position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the start position will display to the right of the range, where as contents slotted to the end position` will display to the left of the range.

Dual Knobs​

Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an ionChange event with a RangeValue, containing the upper and lower values selected.

Pins​

The pin attribute will display the value of the Range above the knob when dragged. This allows users to select a specific value within the Range.

With the pinFormatter function, developers can customize the formatting of the range value to the user.

Snapping & Ticks​

Ticks show indications for each available value on the Range. In order to use ticks, developers must set both snaps and the ticks property to true.

With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.

Event Handling​

Using ionChange​

The ionChange event emits as the Range knob value changes.

Using ionKnobMoveStart and ionKnobMoveEnd​

The ionKnobMoveStart event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, ionKnobMoveEnd emits when the Range knob is released. Both events emit with the RangeValue type and work in combination with the dualKnobs property.

Theming​

CSS Custom Properties​

Range includes CSS Variables to quickly theme and customize the appearance of the Range component to match your application's design.

CSS Shadow Parts​

Range includes CSS Shadow Parts to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.

Interfaces​

RangeChangeEventDetail​

interfaceRangeChangeEventDetail{
 value: RangeValue;
}

RangeKnobMoveStartEventDetail​

interfaceRangeKnobMoveStartEventDetail{
 value: RangeValue;
}

RangeKnobMoveEndEventDetail​

interfaceRangeKnobMoveEndEventDetail{
 value: RangeValue;
}

RangeCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interfaceRangeCustomEventextendsCustomEvent{
 detail: RangeChangeEventDetail;
 target: HTMLIonRangeElement;
}

Types​

RangeValue​

typeRangeValue=number|{ lower:number; upper:number};

Properties​

activeBarStart​

color​

debounce​

disabled​

dualKnobs​

max​

min​

mode​

name​

pin​

pinFormatter​

snaps​

step​

ticks​

value​

Events​

Methods​

No public methods available for this component.

CSS Shadow Parts​

CSS Custom Properties​

Slots​