Double range slider web component <cq-double-slider>
.
A double slider has a thumb (slidable control) at each end of the slider track.
This web component is an implementation of a low/high range slider. The left thumb sets the low value of the slider; the right thumb, the high value.
The value of the slider is an object specifying the high and low values. The component includes a text readout of the values.
Attributes
- min — Minimum value of the slider
- max — Maximum value of the slider
- low — Preset value for the left thumb
- high — Preset value for the right thumb
- step — The absolute amount (positive or negative) the movement of a thumb changes a slider setting
See the example below.
- Since:
-
8.3.0
Example
<cq-item>
Strike <cq-double-slider min="0" max="100" low="20" high="80" step="1"></cq-double-slider>
</cq-item>
Methods
-
setBounds(bounds)
-
Sets the min, max, and step of the slider.
Parameters:
Name Type Description bounds
object Contains min, max, and step values.
- Since:
-
8.3.0
-
setValue( [data])
-
Sets the high and low values of the slider.
The high and low values are restricted to the range of the max and min.
Parameters:
Name Type Argument Description data
object <optional>
Contains high and low values.
- Since:
-
8.3.0
-
updateVisual()
-
Updates the slider view based on the slider attributes.
- Since:
-
8.3.0