The disabled state of the component
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.
Control the validity of the control.
The locale used to format the thumb and tick label values in the slider.
The name attribute of the control.
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 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.
Returns the HTMLFormElement associated with this element.
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 upper bound of the slider value. If not set, the max value is applied.
A string containing the validation message of this element.
Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.
The current value of the component.
A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.
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 slider component used to select numeric value within a range.
Element
igc-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.