Range

ion-range

The Range slider lets users select from a range of values by moving
the slider knob. It can accept dual knobs, but by default one knob
controls the value of the range.

Range Labels

Labels can be placed on either side of the range by adding the
range-left or range-right property to the element. The element
doesn't have to be an ion-label, it can be added to any element
to place it to the left or right of the range. See usage
below for examples.

Minimum and Maximum Values

Minimum and maximum values can be passed to the range through the min
and max properties, respectively. By default, the range sets the min
to 0 and the max to 100.

Steps and Snaps

The step property specifies the value granularity of the range's value.
It can be useful to set the step when the value isn't in increments of 1.
Setting the step property will show tick marks on the range for each step.
The snaps property can be set to automatically move the knob to the nearest
tick mark based on the step property value.

Dual Knobs

Setting the dualKnobs property to true on the range component will
enable two knobs on the range. If the range has two knobs, the value will
be an object containing two properties: lower and upper.