API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-double-slider

WebComponents. cq-double-slider

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