A slider component used to select numeric value within a range.
Element
igc-slider
CSS Parts
base — The base wrapper of the slider.
ticks — The ticks container.
tick-group — The tick group container.
tick — The tick element.
tick-label — The tick label element.
tick-label-inner — The inner element of the tick label.
thumbs — The thumbs container.
thumb — The thumb element.
thumb-label — The thumb tooltip label container.
thumb-label-inner — The thumb tooltip label inner element.
track — The track container.
steps — The track steps element.
inactive — The inactive element of the track.
fill — The filled part of the track.

Properties

Section titled "Properties"

disabled

Section titled "disabled"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

The disabled state of the component.

 
disabled: boolean

Defined in src/internals/mixins/forms/types.ts:32, src/components/slider/slider-base.ts:179

discreteTrack

Section titled "discreteTrack"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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.

 
discreteTrack: boolean = false

Defined in src/components/slider/slider-base.ts:187

hidePrimaryLabels

Section titled "hidePrimaryLabels"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Hides the primary tick labels.

 
hidePrimaryLabels: boolean = false

Defined in src/components/slider/slider-base.ts:237

hideSecondaryLabels

Section titled "hideSecondaryLabels"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Hides the secondary tick labels.

 
hideSecondaryLabels: boolean = false

Defined in src/components/slider/slider-base.ts:244

hideTooltip

Section titled "hideTooltip"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Hides the thumb tooltip.

 
hideTooltip: boolean = false

Defined in src/components/slider/slider-base.ts:194

invalid

Section titled "invalid"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/internals/mixins/forms/types.ts:39

locale

Section titled "locale"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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

 
locale: string = 'en'

Defined in src/components/slider/slider-base.ts:251

name

Section titled "name"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

The name of the control, submitted with the form data.

 
name: string

Defined in src/internals/mixins/forms/types.ts:45

primaryTicks

Section titled "primaryTicks"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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

 
primaryTicks: number = 0

Defined in src/components/slider/slider-base.ts:216

secondaryTicks

Section titled "secondaryTicks"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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

 
secondaryTicks: number = 0

Defined in src/components/slider/slider-base.ts:223

step

Section titled "step"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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.

 
step: number = 1

Defined in src/components/slider/slider-base.ts:209

tickLabelRotation

Section titled "tickLabelRotation"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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

 
tickLabelRotation: SliderTickLabelRotation = 0

Defined in src/components/slider/slider-base.ts:272

tickOrientation

Section titled "tickOrientation"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Changes the orientation of the ticks.

 
tickOrientation: SliderTickOrientation = 'end'

Defined in src/components/slider/slider-base.ts:230

Optional valueFormat

Section titled "valueFormat"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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

 
valueFormat: string

Defined in src/components/slider/slider-base.ts:258

Optional valueFormatOptions

Section titled "valueFormatOptions"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

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

 
valueFormatOptions: NumberFormatOptions

Defined in src/components/slider/slider-base.ts:265

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

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

Defined in src/components/slider/slider.ts:52

Accessors

Section titled "Accessors"

defaultValue

Section titled "defaultValue"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ) 

get defaultValue(): any

Defined in src/internals/mixins/forms/types.ts:127

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/internals/mixins/forms/types.ts:127

Parameters

  • value: unknown

Returns void

form

Section titled "form"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/internals/mixins/forms/types.ts:48

Returns HTMLFormElement | null

lowerBound

Section titled "lowerBound"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ) 

get lowerBound(): any

Defined in src/components/slider/slider-base.ts:145

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

 
set lowerBound(value: number): void

Defined in src/components/slider/slider-base.ts:145

Parameters

  • value: number

Returns void

max

Section titled "max"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ) 

get max(): any

Defined in src/components/slider/slider-base.ts:124

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.

 
set max(value: number): void

Defined in src/components/slider/slider-base.ts:124

Parameters

  • value: number

Returns void

min

Section titled "min"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ) 

get min(): any

Defined in src/components/slider/slider-base.ts:95

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.

 
set min(value: number): void

Defined in src/components/slider/slider-base.ts:95

Parameters

  • value: number

Returns void

upperBound

Section titled "upperBound"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) ) 

get upperBound(): any

Defined in src/components/slider/slider-base.ts:162

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

 
set upperBound(value: number): void

Defined in src/components/slider/slider-base.ts:162

Parameters

  • value: number

Returns void

validationMessage

Section titled "validationMessage"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/internals/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Returns a ValidityState object for the element.

 
get validity(): ValidityState

Defined in src/internals/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): any

Defined in src/components/slider/slider.ts:70

The current value of the component.

 
set value(value: number): void

Defined in src/components/slider/slider.ts:70

Parameters

  • value: number

Returns void

willValidate

Section titled "willValidate"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Returns true when the element is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/internals/mixins/forms/types.ts:59

Returns boolean

Methods

Section titled "Methods"

checkValidity

Section titled "checkValidity"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Checks validity and emits invalid when the control is invalid.

 
checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:114

Returns boolean

reportValidity

Section titled "reportValidity"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Checks validity and shows the browser message when invalid.

 
reportValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:117

Returns boolean

setCustomValidity

Section titled "setCustomValidity"

Inherited from: FormAssociatedMixin( EventEmitterMixin< IgcSliderComponentEventMap, Constructor<IgcSliderBaseComponent> >(IgcSliderBaseComponent) )

Sets a custom message. Invalid while message is not empty.

 
setCustomValidity(message: string): void

Defined in src/internals/mixins/forms/types.ts:120

Parameters

  • message: string

Returns void

stepDown

Section titled "stepDown"

Decrements the value of the slider by stepDecrement * step, where stepDecrement defaults to 1.

 
stepDown(stepDecrement: number): void

Defined in src/components/slider/slider.ts:140

Parameters

  • stepDecrement: number

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

Returns void

stepUp

Section titled "stepUp"

Increments the value of the slider by stepIncrement * step, where stepIncrement defaults to 1.

 
stepUp(stepIncrement: number): void

Defined in src/components/slider/slider.ts:132

Parameters

  • stepIncrement: number

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

Returns void