Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

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

Accessors

Methods

Constructors

constructor

Properties

disabled

disabled: boolean = false

Disables the UI interactions of the slider.

Attr

discreteTrack

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

hidePrimaryLabels: boolean = false

Hides the primary tick labels.

Attr

hide-primary-labels

hideSecondaryLabels

hideSecondaryLabels: boolean = false

Hides the secondary tick labels.

Attr

hide-secondary-labels

hideTooltip

hideTooltip: boolean = false

Hides the thumb tooltip.

Attr

hide-tooltip

locale

locale: string = 'en'

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

Attr

primaryTicks

primaryTicks: number = 0

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

Attr

primary-ticks

secondaryTicks

secondaryTicks: number = 0

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

Attr

secondary-ticks

thumbLabelLower

thumbLabelLower: string

The aria label for the lower thumb.

Attr

thumb-label-lower

thumbLabelUpper

thumbLabelUpper: string

The aria label for the upper thumb.

Attr

thumb-label-upper

tickLabelRotation

tickLabelRotation: -90 | 0 | 90 = 0

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

Attr

tick-label-rotation

tickOrientation

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

Changes the orientation of the ticks.

Attr

tick-orientation

Optional valueFormat

valueFormat?: string

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

Attr

value-format

Optional valueFormatOptions

valueFormatOptions?: NumberFormatOptions

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

Static Readonly tagName

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

Accessors

ariaLabelLower

ariaLabelUpper

lower

lowerBound

  • get lowerBound(): number

  • Returns number

  • set lowerBound(value): void

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

    Attr

    lower-bound

    Parameters

    • value: number

    Returns void

max

  • get max(): number

  • Returns number

  • set max(value): void

  • 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.

    Attr

    Parameters

    • value: number

    Returns void

min

  • get min(): number

  • Returns number

  • set min(value): void

  • 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.

    Attr

    Parameters

    • value: number

    Returns void

step

  • get step(): number

  • Returns number

  • set step(value): void

  • 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.

    Attr

    Parameters

    • value: number

    Returns void

upper

upperBound

  • get upperBound(): number

  • Returns number

  • set upperBound(value): void

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

    Attr

    upper-bound

    Parameters

    • value: number

    Returns void

Methods

connectedCallback

  • connectedCallback(): void

  • Returns void

emitEvent

  • emitEvent<K, D>(type, eventInitDict?): boolean

  • Type parameters

    Type Parameters

    Parameters

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

    Returns boolean

Static register