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 is distributed through NPM under the kendo-react-inputs NPM package.

The Slider component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

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

Is this article helpful?

Not finding the help you need?

Contact Support