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.

Constructors

Section titled "Constructors"

IgcSliderComponent 

new IgcSliderComponent(args: any[]): IgcSliderComponent

Defined in src/components/common/mixins/constructor.ts:1

Returns IgcSliderComponent

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/components/common/mixins/forms/types.ts:29, src/components/slider/slider-base.ts:175

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:183

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:235

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:242

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:190

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/components/common/mixins/forms/types.ts:36

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:249

name

Section titled "name"

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

The name attribute of the control.

 
name: string

Defined in src/components/common/mixins/forms/types.ts:42

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:214

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:221

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:270

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:228

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:256

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:263

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(): unknown

Defined in src/components/common/mixins/forms/types.ts:163

Returns unknown

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/components/common/mixins/forms/types.ts:162

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/components/common/mixins/forms/types.ts:45

Returns HTMLFormElement | null

lowerBound

Section titled "lowerBound"

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

get lowerBound(): number

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

Returns number

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:141

Parameters

  • value: number

Returns void

max

Section titled "max"

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

get max(): number

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

Returns number

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:120

Parameters

  • value: number

Returns void

min

Section titled "min"

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

get min(): number

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

Returns number

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:91

Parameters

  • value: number

Returns void

step

Section titled "step"

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

get step(): number

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

Returns 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. If labels are provided (projected) then the step is always assumed to be 1 since it is a discrete slider.

 
set step(value: number): void

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

Parameters

  • value: number

Returns void

upperBound

Section titled "upperBound"

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

get upperBound(): number

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

Returns number

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:158

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/components/common/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

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

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

 
get validity(): ValidityState

Defined in src/components/common/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): number

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

Returns number

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) )

A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/components/common/mixins/forms/types.ts:60

Returns boolean

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

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

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

checkValidity

Section titled "checkValidity"

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

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

 
checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

emitEvent

Section titled "emitEvent"

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

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

removeEventListener

Section titled "removeEventListener"

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

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

reportValidity

Section titled "reportValidity"

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

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

 
reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:149

Returns boolean

setCustomValidity

Section titled "setCustomValidity"

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

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

 
setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

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:132

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:124

Parameters

  • stepIncrement: number

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

Returns void

register

Section titled "register" 
register(): void

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

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange"

Emitted when a value change is committed on a thumb drag end or keyboard interaction.

 
igcChange: CustomEvent<number>

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

igcInput

Section titled "igcInput"

Emitted when a value is changed via thumb drag or keyboard interaction.

 
igcInput: CustomEvent<number>

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