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

Hierarchy

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

Constructors

Properties

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

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

invalid: boolean

Control the validity of the control.

Attr

locale: string = 'en'

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

Attr

name: string

The name attribute of the control.

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

value: number = 0

The current value of the component.

Attr

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-slider" = 'igc-slider'

Accessors

  • get form(): null | HTMLFormElement
  • Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

  • 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

  • get validationMessage(): string
  • A string containing the validation message of this element.

    Returns string

  • get validity(): ValidityState
  • Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

    Returns ValidityState

  • get willValidate(): boolean
  • A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

    Returns boolean

Methods

  • Checks for validity of the control and emits the invalid event if it invalid.

    Returns boolean

  • Returns void

  • Type parameters

    Type Parameters

    • K extends keyof IgcSliderEventMap

    • D extends number

    Parameters

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

    Returns boolean

  • Checks for validity of the control and shows the browser message if it invalid.

    Returns boolean

  • Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

    Parameters

    • message: string

    Returns 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

  • 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