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

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

Constructors

constructor

Properties

disabled discreteTrack hidePrimaryLabels hideSecondaryLabels hideTooltip invalid locale name primaryTicks secondaryTicks tickLabelRotation tickOrientation value valueFormat? valueFormatOptions? tagName

Accessors

form lowerBound max min step upperBound validationMessage validity willValidate

Methods

checkValidity connectedCallback disconnectedCallback emitEvent reportValidity setCustomValidity stepDown stepUp

Constructors

constructor

Properties

disabled

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

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

invalid

invalid: boolean

Control the validity of the control.

Attr

locale

locale: string = 'en'

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

Attr

name

name: string

The name attribute of the control.

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

tickLabelRotation

tickLabelRotation: 0 | 90 | -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

value

value: number = 0

The current value of the component.

Attr

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

Accessors

form

  • get form(): null | HTMLFormElement

  • Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

lowerBound

  • 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: undefined | number): void

  • Parameters

    • value: undefined | number

    Returns void

max

  • get max(): number

  • The maximum value of the slider scale. Defaults to 100.

    Attr

    Returns number

  • set max(value: number): void

  • Parameters

    • value: number

    Returns void

min

  • get min(): number

  • The minimum value of the slider scale. Defaults to 0.

    Attr

    Returns number

  • set min(value: number): void

  • Parameters

    • value: number

    Returns void

step

  • 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: number): void

  • Parameters

    • value: number

    Returns void

upperBound

  • 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: undefined | number): void

  • Parameters

    • value: undefined | number

    Returns void

validationMessage

  • get validationMessage(): string

  • A string containing the validation message of this element.

    Returns string

validity

  • 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

willValidate

  • 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

checkValidity

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

    Returns boolean

connectedCallback

  • Returns void

disconnectedCallback

  • Returns void

emitEvent

  • Type Parameters

    • K extends keyof IgcSliderEventMap

    • D extends number

    Parameters

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

    Returns boolean

reportValidity

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

    Returns boolean

setCustomValidity

  • 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

stepDown

  • 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

  • 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