Class IgcSliderComponent

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.

Hierarchy

  • EventEmitterInterface<IgcSliderEventMap, this> & IgcSliderBaseComponent<this>
    • IgcSliderComponent

Index

Constructors

Properties

disabled: boolean = false

Disables the UI interactions of the slider.

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.

hidePrimaryLabels: boolean = false

Hides the primary tick labels.

hideSecondaryLabels: boolean = false

Hides the secondary tick labels.

hideTooltip: boolean = false

Hides the thumb tooltip.

locale: string = 'en'

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

primaryTicks: number = 0

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

secondaryTicks: number = 0

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

tickLabelRotation: 0 | 90 | -90 = 0

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

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

Changes the orientation of the ticks.

valueFormat?: string

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

valueFormatOptions?: NumberFormatOptions

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

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

Accessors

  • get ariaLabel(): string
  • set ariaLabel(value: string): void
  • The aria label of the slider thumb.

    Returns string

  • Parameters

    • value: string

    Returns void

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

    Returns undefined | number

  • Parameters

    • value: undefined | number

    Returns void

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

    Returns number

  • Parameters

    • value: number

    Returns void

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

    Returns number

  • Parameters

    • value: number

    Returns void

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

    Returns number

  • Parameters

    • value: number

    Returns void

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

    Returns undefined | number

  • Parameters

    • value: undefined | number

    Returns void

  • get value(): number
  • set value(val: number): void

Methods

  • connectedCallback(): void
  • emitEvent<K, D>(type: K, eventInitDict?: CustomEventInit<D>): boolean
  • Type Parameters

    • K extends keyof IgcSliderEventMap

    • D extends number

    Parameters

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

    Returns boolean

  • stepDown(stepDecrement?: number): void
  • Decrements the value of the slider by stepDecrement * step, where stepDecrement defaults to 1.

    Parameters

    • stepDecrement: number = 1

      Optional step decrement. If no parameter is passed, it defaults to 1.

    Returns void

  • stepUp(stepIncrement?: number): void
  • Increments the value of the slider by stepIncrement * step, where stepIncrement defaults to 1.

    Parameters

    • stepIncrement: number = 1

      Optional step increment. If no parameter is passed, it defaults to 1.

    Returns void