Class IgcRangeSliderComponent

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.

Hierarchy

Hierarchy

  • EventEmitterInterface<IgcRangeSliderEventMap, this> & IgcSliderBaseComponent<this>
    • IgcRangeSliderComponent

Constructors

Properties

ariaLabelLower: string

The aria label of the lower thumb.

Attr

aria-label-lower

ariaLabelUpper: string

The aria label of the upper thumb.

Attr

aria-label-upper

disabled: boolean = false

Disables the UI interactions of the slider.

Attr

discreteTrack: boolean = false

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.

Attr

discrete-track

hidePrimaryLabels: boolean = false

Hides the primary tick labels.

Attr

hide-primary-labels

hideSecondaryLabels: boolean = false

Hides the secondary tick labels.

Attr

hide-secondary-labels

hideTooltip: boolean = false

Hides the thumb tooltip.

Attr

hide-tooltip

locale: string = 'en'

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

Attr

primaryTicks: number = 0

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

Attr

primary-ticks

secondaryTicks: number = 0

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

Attr

secondary-ticks

tickLabelRotation: 0 | 90 | -90 = 0

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

Attr

tick-label-rotation

tickOrientation: "end" | "start" | "mirror" = 'end'

Changes the orientation of the ticks.

Attr

tick-orientation

valueFormat?: string

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

Attr

value-format

valueFormatOptions?: NumberFormatOptions

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

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

Accessors

  • get lowerBound(): undefined | number
  • The lower bound of the slider value. If not set, the min value is applied.

    Attr

    lower-bound

    Returns undefined | number

  • set lowerBound(value): void
  • Parameters

    • value: undefined | number

    Returns void

  • get max(): number
  • The maximum value of the slider scale. Defaults to 100.

    Attr

    Returns number

  • set max(value): void
  • Parameters

    • value: number

    Returns void

  • get min(): number
  • The minimum value of the slider scale. Defaults to 0.

    Attr

    Returns number

  • set min(value): void
  • Parameters

    • value: number

    Returns void

  • get step(): number
  • 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.

    Attr

    Returns number

  • set step(value): void
  • Parameters

    • value: number

    Returns void

  • get upperBound(): undefined | number
  • The upper bound of the slider value. If not set, the max value is applied.

    Attr

    upper-bound

    Returns undefined | number

  • set upperBound(value): void
  • Parameters

    • value: undefined | number

    Returns void

Methods

  • Returns void

  • Type parameters

    Type Parameters

    Parameters

    • type: K
    • Optional eventInitDict: CustomEventInit<D>

    Returns boolean