All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Slider Overview

The 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 Slider wrapper for React is a client-side wrapper for Kendo UI Slider widget.

Basic Usage

The following example demonstrates the Slider in action.

class SliderContainer extends React.Component {
    constructor(props) {
        super(props);
        this.min = props.min;
        this.max = props.max;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Slider
                        min={this.min}
                        max={this.max} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <SliderContainer min={ 10 } max={ 50 } />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic Slider events. You can subscribe to all Slider events by the handler name.

class SliderContainer extends React.Component {
    constructor(props) {
        super(props);
        this.min = props.min;
        this.max = props.max;
    }

    onChange = (e) => {
        console.log("event :: change");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                    <Slider
                        min={this.min}
                        max={this.max}
                        change={this.onChange} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <SliderContainer min={ 10 } max={ 50 } />,
    document.querySelector('my-app')
);
In this article