Range
ion-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
.
Usage
<ion-list>
<ion-item>
<ion-range [(ngModel)]="singleValue" color="danger" pin="true"></ion-range>
</ion-item>
<ion-item>
<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
<ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</ion-item>
<ion-item>
<ion-range min="20" max="80" step="2" [(ngModel)]="brightness">
<ion-icon small range-left name="sunny"></ion-icon>
<ion-icon range-right name="sunny"></ion-icon>
</ion-range>
</ion-item>
<ion-item>
<ion-label>step=100, snaps, </ion-label>
<ion-range min="1000" max="2000" step="100" snaps="true" color="secondary" [(ngModel)]="singleValue4"></ion-range>
</ion-item>
<ion-item>
<ion-label>dual, step=3, snaps, </ion-label>
<ion-range dualKnobs="true" [(ngModel)]="dualValue2" min="21" max="72" step="3" snaps="true"></ion-range>
</ion-item>
</ion-list>
Instance Members
ratio
Returns the ratio of the knob’s is current location, which is a number
between 0
and 1
. If two knobs are used, this property represents
the lower value.
ratioUpper
Returns the ratio of the upper value’s is current location, which is
a number between 0
and 1
. If there is only one knob, then this
will return null
.
Input Properties
Attr | Type | Details |
---|---|---|
color | string |
The color to use from your Sass |
debounce | number |
How long, in milliseconds, to wait to trigger the
|
disabled | boolean |
If true, the user cannot interact with this element. |
dualKnobs | boolean |
Show two knobs. Defaults to |
max | number |
Maximum integer value of the range. Defaults to |
min | number |
Minimum integer value of the range. Defaults to |
mode | string |
The mode determines which platform styles to use.
Possible values are: |
pin | boolean |
If true, a pin with integer value is shown when the knob
is pressed. Defaults to |
snaps | boolean |
If true, the knob snaps to tick marks evenly spaced based
on the step property value. Defaults to |
step | number |
Specifies the value granularity. Defaults to |
Output Events
Attr | Details |
---|---|
ionChange | Emitted when the range value changes. |
Sass Variables
Property | Default | Description |
---|---|---|
$range-ios-padding-vertical |
8px |
Padding top/bottom of the range |
$range-ios-padding-horizontal |
16px |
Padding left/right of the range |
$range-ios-slider-height |
42px |
Height of the range slider |
$range-ios-hit-width |
42px |
Width of the area that will select the range knob |
$range-ios-hit-height |
$range-ios-slider-height |
Height of the area that will select the range knob |
$range-ios-bar-height |
1px |
Height of the range bar |
$range-ios-bar-background-color |
#bdbdbd |
Background of the range bar |
$range-ios-bar-active-background-color |
color($colors-ios, primary) |
Background of the active range bar |
$range-ios-knob-width |
28px |
Width of the range knob |
$range-ios-knob-height |
$range-ios-knob-width |
Height of the range knob |
$range-ios-knob-box-shadow |
0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) |
Box shadow of the range knob |
$range-ios-knob-border-radius |
50% |
Border radius of the range knob |
$range-ios-knob-background-color |
#fff |
Background of the range knob |
$range-ios-tick-width |
$range-ios-bar-height |
Width of the range tick |
$range-ios-tick-height |
8px |
Height of the range tick |
$range-ios-tick-border-radius |
0 |
Border radius of the range tick |
$range-ios-tick-background-color |
$range-ios-bar-background-color |
Background of the range tick |
$range-ios-tick-active-background-color |
$range-ios-bar-active-background-color |
Background of the active range tick |
$range-ios-pin-background-color |
transparent |
Background of the range pin |
$range-ios-pin-color |
$text-ios-color |
Color of the range pin |
$range-ios-pin-font-size |
12px |
Font size of the range pin |
$range-ios-pin-padding |
8px |
Padding of the range pin |
Property | Default | Description |
---|---|---|
$range-md-padding-vertical |
8px |
Padding top/bottom of the range |
$range-md-padding-horizontal |
8px |
Padding left/right of the range |
$range-md-slider-height |
42px |
Height of the range slider |
$range-md-hit-width |
42px |
Width of the area that will select the range knob |
$range-md-hit-height |
$range-md-slider-height |
Height of the area that will select the range knob |
$range-md-bar-height |
2px |
Height of the range bar |
$range-md-bar-background-color |
#bdbdbd |
Background of the range bar |
$range-md-bar-active-background-color |
color($colors-md, primary) |
Background of the active range bar |
$range-md-knob-width |
18px |
Width of the range knob |
$range-md-knob-height |
$range-md-knob-width |
Height of the range knob |
$range-md-knob-background-color |
$range-md-bar-active-background-color |
Background of the range knob |
$range-md-knob-min-background-color |
$background-md-color |
Background of the range knob when the value is the minimum |
$range-md-knob-min-border |
2px solid $range-md-bar-background-color |
Border of the range knob when the value is the minimum |
$range-md-tick-width |
2px |
Width of the range tick |
$range-md-tick-height |
$range-md-tick-width |
Height of the range tick |
$range-md-tick-border-radius |
50% |
Border radius of the range tick |
$range-md-tick-background-color |
#000 |
Background of the range tick |
$range-md-tick-active-background-color |
$range-md-tick-background-color |
Background of the active range tick |
$range-md-pin-background-color |
$range-md-bar-active-background-color |
Background of the range pin |
$range-md-pin-color |
color-contrast($colors-md, $range-md-bar-active-background-color) |
Color of the range pin |
$range-md-pin-font-size |
12px |
Font size of the range pin |
$range-md-pin-padding-vertical |
8px |
Padding top/bottom of the range pin |
$range-md-pin-padding-horizontal |
0 |
Padding left/right of the range pin |
$range-md-pin-min-background-color |
$range-md-bar-background-color |
Background of the range pin when the value is the minimum |
Property | Default | Description |
---|---|---|
$range-wp-padding-vertical |
8px |
Padding top/bottom of the range |
$range-wp-padding-horizontal |
8px |
Padding left/right of the range |
$range-wp-slider-height |
42px |
Height of the range slider |
$range-wp-hit-width |
42px |
Width of the area that will select the range knob |
$range-wp-hit-height |
$range-wp-slider-height |
Height of the area that will select the range knob |
$range-wp-bar-height |
2px |
Height of the range bar |
$range-wp-bar-background-color |
#bdbdbd |
Background of the range bar |
$range-wp-bar-active-background-color |
color($colors-wp, primary) |
Background of the active range bar |
$range-wp-knob-width |
8px |
Width of the range knob |
$range-wp-knob-height |
$range-wp-knob-width * 3 |
Height of the range knob |
$range-wp-knob-background-color |
$range-wp-bar-active-background-color |
Background of the range knob |
$range-wp-knob-border-radius |
$range-wp-knob-width / 2 |
Border radius of the range knob |
$range-wp-tick-width |
$range-wp-bar-height |
Width of the range tick |
$range-wp-tick-height |
$range-wp-tick-width * 3 |
Height of the range tick |
$range-wp-tick-border-radius |
$range-wp-knob-width / 2 |
Border radius of the range tick |
$range-wp-tick-background-color |
$range-wp-bar-background-color |
Background of the range tick |
$range-wp-tick-active-background-color |
$range-wp-bar-active-background-color |
Background of the active range tick |
$range-wp-pin-background-color |
$range-wp-bar-active-background-color |
Background of the range pin |
$range-wp-pin-color |
color-contrast($colors-wp, $range-wp-bar-active-background-color) |
Color of the range pin |
$range-wp-pin-font-size |
12px |
Font size of the range pin |
$range-wp-pin-padding |
8px |
Padding of the range pin |