A range slider component used to select two numeric values within a range.
- CSS Parts
base— The base wrapper of the slider.ticks— The ticks container.tick-group— The tick group container.tick— The tick element.tick-label— The tick label element.tick-label-inner— The inner element of the tick label.thumbs— The thumbs container.thumb— The thumb element.thumb-label— The thumb tooltip label container.thumb-label-inner— The thumb tooltip label inner element.track— The track container.steps— The track steps element.inactive— The inactive element of the track.fill— The filled part of the track.
Properties
Section titled "Properties"lower
Section titled "lower"The current value of the lower thumb.
lower: numberthumbLabelLower
Section titled "thumbLabelLower"The aria label for the lower thumb.
thumbLabelLower: stringthumbLabelUpper
Section titled "thumbLabelUpper"The aria label for the upper thumb.
thumbLabelUpper: stringupper
Section titled "upper"The current value of the upper thumb.
upper: numberEvents
Section titled "Events"onChange
Section titled "onChange"Emitted when a value change is committed on a thumb drag end or keyboard interaction.
onChange(args: CustomEvent<IgrRangeSliderValueEventArgs>): voidParameters
Returns void
onInput
Section titled "onInput"Emitted when a value is changed via thumb drag or keyboard interaction.
onInput(args: CustomEvent<IgrRangeSliderValueEventArgs>): void