Inputs / Slider / Getting Started
material theme

Getting Started with KendoReact Slider

The KendoReact Slider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the side arrow buttons.

The KendoReact Slider component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs NPM package.

Basic Usage

The following example demonstrates the Slider in action.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Slider, SliderLabel } from '@progress/kendo-react-inputs';

class App extends React.Component {
    render() {
        return (
            <Slider
                buttons={true}
                step={1}
                defaultValue={7}
                min={1}
                max={10}
            >
                <SliderLabel position={1}>1</SliderLabel>
                <SliderLabel position={3}>3</SliderLabel>
                <SliderLabel position={5}>5</SliderLabel>
                <SliderLabel position={7}>7</SliderLabel>
                <SliderLabel position={10}>10</SliderLabel>
            </Slider>
        );
    }
}

ReactDOM.render(<App />, document.querySelector('my-app'));

Functionality and Features

 /