SliderProps

Represents the props of the KendoReact Slider component.

Name	Type	Default	Description
ariaDescribedBy?	string		Identifies the element(s) which will describe the component. jsx <Slider ariaDescribedBy="description-id" min={0} max={100} />
ariaLabel?	string		Specifies the accessible label of the Slider. jsx <Slider ariaLabel="Slider component" min={0} max={100} />
ariaLabelledBy?	string		Identifies the element(s) which will label the component. jsx <Slider ariaLabelledBy="label-id" min={0} max={100} />
buttons?	boolean		Renders the arrow side buttons of the Slider if set to true. jsx <Slider buttons={true} min={0} max={100} />
children?	React.ReactNode
className?	string		Adds custom CSS classes to the Slider. jsx <Slider className="custom-class" min={0} max={100} />
defaultValue?	number		Specifies the default value of the Slider. jsx <Slider defaultValue={30} min={0} max={100} />
dir?	Direction		Specifies the direction of the Slider (ltr or rtl). jsx <Slider dir="rtl" min={0} max={100} />
disabled?	boolean		When true, disables the Slider. jsx <Slider disabled={true} min={0} max={100} />
id?	string		Specifies the id of the Slider. 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. jsx <Slider largeStep={10} min={0} max={100} />
max	number		Specifies the maximum value of the Slider. jsx <Slider min={0} max={100} />
min	number		Specifies the minimum value of the Slider. 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. jsx <Slider onChange={(event) => console.log(event.value)} 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. jsx <Slider step={5} min={0} max={100} />
style?	React.CSSProperties		Sets additional CSS styles to the Slider. jsx <Slider style={{ margin: '10px' }} min={0} max={100} />
tabIndex?	number		Specifies the tabIndex of the Slider. 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. jsx <Slider value={50} min={0} max={100} />
vertical?	boolean		Changes the orientation of the Slider to vertical if set to true. jsx <Slider vertical={true} min={0} max={100} />