Disables the UI interactions of the slider.
Marks the slider track as discrete so it displays the steps.
If the step is 0, the slider will remain continuos even if discreteTrack is true.
Hides the primary tick labels.
Hides the secondary tick labels.
Hides the thumb tooltip.
The locale used to format the thumb and tick label values in the slider.
The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.
The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.
The aria label for the lower thumb.
The aria label for the upper thumb.
The degrees for the rotation of the tick labels. Defaults to 0.
Changes the orientation of the ticks.
OptionalvalueString format used for the thumb and tick label values in the slider.
OptionalvalueNumber format options used for the thumb and tick label values in the slider.
Static ReadonlytagReturns the HTML-uppercased qualified name.
The current value of the lower thumb.
The lower bound of the slider value. If not set, the min value is applied.
The maximum value of the slider scale. Defaults to 100.
If max is less than min the call is a no-op.
If labels are provided (projected), then max is always set to
the number of labels.
If upperBound ends up being greater than than the current max value,
it is automatically assigned the new max value.
The minimum value of the slider scale. Defaults to 0.
If min is greater than max the call is a no-op.
If labels are provided (projected), then min is always set to 0.
If lowerBound ends up being less than than the current min value,
it is automatically assigned the new min value.
Specifies the granularity that the value must adhere to.
If set to 0 no stepping is implied and any value in the range is allowed.
If labels are provided (projected) then the step is always assumed to be 1 since it is a discrete slider.
The current value of the upper thumb.
The upper bound of the slider value. If not set, the max value is applied.
Invoked when the component is added to the document's DOM.
In connectedCallback() you should setup tasks that should only occur when
the element is connected to the document. The most common of these is
adding event listeners to nodes external to the element, like a keydown
event handler added to the window.
connectedCallback() {
super.connectedCallback();
addEventListener('keydown', this._handleKeydown);
}
Typically, anything done in connectedCallback() should be undone when the
element is disconnected, in disconnectedCallback().
A range slider component used to select two numeric values within a range.
Element
igc-range-slider
Fires
igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.
Fires
igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.
Csspart
base - The base wrapper of the slider.
Csspart
ticks - The ticks container.
Csspart
tick-group - The tick group container.
Csspart
tick - The tick element.
Csspart
tick-label - The tick label element.
Csspart
tick-label-inner - The inner element of the tick label.
Csspart
thumbs - The thumbs container.
Csspart
thumb - The thumb element.
Csspart
thumb-label - The thumb tooltip label container.
Csspart
thumb-label-inner - The thumb tooltip label inner element.
Csspart
track - The track container.
Csspart
steps - The track steps element.
Csspart
inactive - The inactive element of the track.
Csspart
fill - The filled part of the track.