A range slider component used to select two numeric values within a range.
Element
igc-range-slider
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"

disabled

Section titled "disabled"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

Disables the UI interactions of the slider.

 
disabled: boolean = false

Defined in src/components/slider/slider-base.ts:179

discreteTrack

Section titled "discreteTrack"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

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.

 
discreteTrack: boolean = false

Defined in src/components/slider/slider-base.ts:187

hidePrimaryLabels

Section titled "hidePrimaryLabels"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

Hides the primary tick labels.

 
hidePrimaryLabels: boolean = false

Defined in src/components/slider/slider-base.ts:237

hideSecondaryLabels

Section titled "hideSecondaryLabels"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

Hides the secondary tick labels.

 
hideSecondaryLabels: boolean = false

Defined in src/components/slider/slider-base.ts:244

hideTooltip

Section titled "hideTooltip"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

Hides the thumb tooltip.

 
hideTooltip: boolean = false

Defined in src/components/slider/slider-base.ts:194

locale

Section titled "locale"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

The locale used to format the thumb and tick label values in the slider.

 
locale: string = 'en'

Defined in src/components/slider/slider-base.ts:251

primaryTicks

Section titled "primaryTicks"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.

 
primaryTicks: number = 0

Defined in src/components/slider/slider-base.ts:216

secondaryTicks

Section titled "secondaryTicks"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.

 
secondaryTicks: number = 0

Defined in src/components/slider/slider-base.ts:223

step

Section titled "step"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

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.

 
step: number = 1

Defined in src/components/slider/slider-base.ts:209

thumbLabelLower

Section titled "thumbLabelLower"

The aria label for the lower thumb.

 
thumbLabelLower: string

Defined in src/components/slider/range-slider.ts:103

thumbLabelUpper

Section titled "thumbLabelUpper"

The aria label for the upper thumb.

 
thumbLabelUpper: string

Defined in src/components/slider/range-slider.ts:110

tickLabelRotation

Section titled "tickLabelRotation"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

The degrees for the rotation of the tick labels. Defaults to 0.

 
tickLabelRotation: SliderTickLabelRotation = 0

Defined in src/components/slider/slider-base.ts:272

tickOrientation

Section titled "tickOrientation"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

Changes the orientation of the ticks.

 
tickOrientation: SliderTickOrientation = 'end'

Defined in src/components/slider/slider-base.ts:230

Optional valueFormat

Section titled "valueFormat"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

String format used for the thumb and tick label values in the slider.

 
valueFormat: string

Defined in src/components/slider/slider-base.ts:258

Optional valueFormatOptions

Section titled "valueFormatOptions"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent)

Number format options used for the thumb and tick label values in the slider.

 
valueFormatOptions: NumberFormatOptions

Defined in src/components/slider/slider-base.ts:265

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-range-slider" = 'igc-range-slider'

Defined in src/components/slider/range-slider.ts:56

Accessors

Section titled "Accessors"

lower

Section titled "lower" 
get lower(): any

Defined in src/components/slider/range-slider.ts:77

The current value of the lower thumb.

 
set lower(val: number): void

Defined in src/components/slider/range-slider.ts:77

Parameters

  • val: number

Returns void

lowerBound

Section titled "lowerBound"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) 

get lowerBound(): any

Defined in src/components/slider/slider-base.ts:145

The lower bound of the slider value. If not set, the min value is applied.

 
set lowerBound(value: number): void

Defined in src/components/slider/slider-base.ts:145

Parameters

  • value: number

Returns void

max

Section titled "max"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) 

get max(): any

Defined in src/components/slider/slider-base.ts:124

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.

 
set max(value: number): void

Defined in src/components/slider/slider-base.ts:124

Parameters

  • value: number

Returns void

min

Section titled "min"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) 

get min(): any

Defined in src/components/slider/slider-base.ts:95

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.

 
set min(value: number): void

Defined in src/components/slider/slider-base.ts:95

Parameters

  • value: number

Returns void

upper

Section titled "upper" 
get upper(): any

Defined in src/components/slider/range-slider.ts:90

The current value of the upper thumb.

 
set upper(val: number): void

Defined in src/components/slider/range-slider.ts:90

Parameters

  • val: number

Returns void

upperBound

Section titled "upperBound"

Inherited from: EventEmitterMixin< IgcRangeSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) 

get upperBound(): any

Defined in src/components/slider/slider-base.ts:162

The upper bound of the slider value. If not set, the max value is applied.

 
set upperBound(value: number): void

Defined in src/components/slider/slider-base.ts:162

Parameters

  • value: number

Returns void