Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Class IgrSlider

A slider component used to select numeric value within a range.

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.

Callable

  • IgrSlider(): ReactNode

    Returns ReactNode

Events

Methods

Properties

Events

onChange

onChange: (args: CustomEvent<number>) => void

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

Type declaration

onInput

onInput: (args: CustomEvent<number>) => void

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

Type declaration

Methods

stepDown

  • stepDown(stepDecrement?: number): void

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

    Parameters

    • stepDecrement: number

      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

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

    Returns void

Properties

value

value: number

The current value of the component.