Ionic Range

The Ionic range slider is used to choose and display the level of values by moving the slider knob. By default, only one knob controls the value of the range, but it can also accept dual knobs.

Range labels

The labels can be placed on both side of the range by adding the attribute slot= "start" and slot= "end" to the element.

Maximum and Minimum values

The maximum and minimum values can be passed in the range by using the max and min properties, respectively. By default, the range has set the min=0 and max=0 values.

Steps and Snaps

The steps property is used to specify the value granularity of the range value. It can be useful when the value is not in increments of 1. If you set the step property in the range, it will show the tick marks on the range for each step. The snap property is used to automatically move the knob to the nearest tick mark based on the step property value.

Dual knobs

If the dual-knobs property is set to true on the range component, it will enable the two knobs on the range. It means the value will be an object containing two properties: lower and upper.

We can understand the Ionic range from the following example.

Example

Output:

Adding Icons to the range

Icons are used to display the data clearly. We can place the icons before and after the range input on both sides of the range element. The following example shows the use of icons in range.

Example

Output:

Styling Range

We can also style the range by using the color property. The following example shows the use of color with ionic range component.

Example

Output: