a7f1f4daa7
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
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
slot="start" or slot="end" 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.
Properties
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
debounce
number
How long, in milliseconds, to wait to trigger the
ionChange event after each change in the range value. Default 0.
disabled
boolean
Indicates that the user cannot interact with the control.
dualKnobs
boolean
Show two knobs. Defaults to false.
max
number
Maximum integer value of the range. Defaults to 100.
min
number
Minimum integer value of the range. Defaults to 0.
mode
string
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
name
string
The name of the control, which is submitted with the form data.
pin
boolean
If true, a pin with integer value is shown when the knob
is pressed. Defaults to false.
snaps
boolean
If true, the knob snaps to tick marks evenly spaced based
on the step property value. Defaults to false.
step
number
Specifies the value granularity. Defaults to 1.
value
any
the value of the range.
Attributes
color
string
The color to use from your Sass $colors map.
Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
debounce
number
How long, in milliseconds, to wait to trigger the
ionChange event after each change in the range value. Default 0.
disabled
boolean
Indicates that the user cannot interact with the control.
dual-knobs
boolean
Show two knobs. Defaults to false.
max
number
Maximum integer value of the range. Defaults to 100.
min
number
Minimum integer value of the range. Defaults to 0.
mode
string
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
name
string
The name of the control, which is submitted with the form data.
pin
boolean
If true, a pin with integer value is shown when the knob
is pressed. Defaults to false.
snaps
boolean
If true, the knob snaps to tick marks evenly spaced based
on the step property value. Defaults to false.
step
number
Specifies the value granularity. Defaults to 1.
value
any
the value of the range.
Events
ionBlur
Emitted when the range loses focus.
ionChange
Emitted when the value property has changed.
ionFocus
Emitted when the range has focus.
ionStyle
Emitted when the styles change.
Built with StencilJS