New to KendoReact? Start a free 30-day trial

SliderProps

Interface

Represents the props of the KendoReact Slider component.

Definition

Package:@progress/kendo-react-inputs

Properties

ariaDescribedBy?

string

Identifies the element(s) which will describe the component.

Example:

jsx

<Slider ariaDescribedBy="description-id" min={0} max={100} />

ariaLabel?

string

Specifies the accessible label of the Slider.

Example:

jsx

<Slider ariaLabel="Slider component" min={0} max={100} />

ariaLabelledBy?

string

Identifies the element(s) which will label the component.

Example:

jsx

<Slider ariaLabelledBy="label-id" min={0} max={100} />

buttons?

boolean

Renders the arrow side buttons of the Slider if set to true.

Example:

jsx

<Slider buttons={true} min={0} max={100} />

children?

ReactNode

The content of the Slider component.

className?

string

Adds custom CSS classes to the Slider.

Example:

jsx

<Slider className="custom-class" min={0} max={100} />

defaultValue?

number

Specifies the default value of the Slider.

Example:

jsx

<Slider defaultValue={30} min={0} max={100} />

dir?

Direction

Specifies the direction of the Slider (ltr or rtl).

Example:

jsx

<Slider dir="rtl" min={0} max={100} />

disabled?

boolean

When true, disables the Slider.

Example:

jsx

<Slider disabled={true} min={0} max={100} />

id?

string

Specifies the id of the Slider.

Example:

jsx

<Slider id="slider-component" min={0} max={100} />

largeStep?

number

Specifies the step by which the Slider's value will be increased or decreased using pageUp or pageDown keyboard buttons.

Example:

jsx

<Slider largeStep={10} min={0} max={100} />

max

number

Specifies the maximum value of the Slider.

Example:

jsx

<Slider min={0} max={100} />

min

number

Specifies the minimum value of the Slider.

Example:

jsx

<Slider min={0} max={100} />

name?

string

Specifies the name property of the input DOM element.

This property is part of the FormComponentProps interface.

onChange?

(event: SliderChangeEvent) => void

Fires when the value of the Slider changes.

Parameters:eventSliderChangeEvent

Example:

jsx

<Slider onChange={(event) => console.log(event.value)} min={0} max={100} />

readOnly?

boolean

Makes the Slider read-only when set to true. The Slider will remain focusable but its value cannot be changed by the user.

Example:

jsx

<Slider readOnly={true} min={0} max={100} />

required?

boolean

Specifies if null is a valid value for the component.

This property is part of the FormComponentProps interface.

step?

number

Specifies the step by which the Slider's value will be increased or decreased using its buttons or keyboard arrows.

Example:

jsx

<Slider step={5} min={0} max={100} />

style?

CSSProperties

Sets additional CSS styles to the Slider.

Example:

jsx

<Slider style={{ margin: '10px' }} min={0} max={100} />

tabIndex?

number

Specifies the tabIndex of the Slider.

Example:

jsx

<Slider tabIndex={0} min={0} max={100} />

valid?

boolean

Overrides the validity state of the component. If valid is set, the required property will be ignored.

This property is part of the FormComponentProps interface.

validationMessage?

string

Controls the form error message of the component. If set to an empty string, no error will be thrown.

This property is part of the FormComponentProps interface.

validityStyles?

boolean

If set to false, no visual representation of the invalid state of the component will be applied.

This property is part of the FormComponentProps interface.

value?

number

Specifies the current value of the Slider.

Example:

jsx

<Slider value={50} min={0} max={100} />

vertical?

boolean

Changes the orientation of the Slider to vertical if set to true.

Example:

jsx

<Slider vertical={true} min={0} max={100} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.