Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

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

Accessors

Methods

Constructors

Abstract constructor

Properties

disabled

disabled: boolean = false

Disables the UI interactions of the slider.

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.

hidePrimaryLabels

hidePrimaryLabels: boolean = false

Hides the primary tick labels.

hideSecondaryLabels

hideSecondaryLabels: boolean = false

Hides the secondary tick labels.

hideTooltip

hideTooltip: boolean = false

Hides the thumb tooltip.

locale

locale: string = 'en'

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

primaryTicks

primaryTicks: number = 0

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

secondaryTicks

secondaryTicks: number = 0

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

tickLabelRotation

tickLabelRotation: 0 | 90 | -90 = 0

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

tickOrientation

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

Changes the orientation of the ticks.

Optional valueFormat

valueFormat?: string

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

Optional valueFormatOptions

valueFormatOptions?: NumberFormatOptions

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

Static Readonly tagName

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

Accessors

ariaLabel

  • get ariaLabel(): string
  • set ariaLabel(value: string): void

  • The aria label of the slider thumb.

    Returns string

  • Parameters

    • value: string

    Returns void

lowerBound

  • 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

max

  • 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

min

  • 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

step

  • 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

upperBound

  • 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

value

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

Methods

connectedCallback

  • connectedCallback(): void

emitEvent

  • 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

  • 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

  • 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