Inputs / RangeSlider / Getting Started
material theme

Getting Started with KendoReact RangeSlider

The KendoReact RangeSlider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the value on the scale or using the arrow keys.

The KendoReact RangeSlider is distributed through NPM under the kendo-react-inputs NPM package.

The RangeSlider 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 RangeSlider in action.

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

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

class App extends React.Component {
    render() {
        return (
            <RangeSlider
                defaultValue={{start: 30, end: 70}}
                step={1}
                min={0}
                max={100}
            >
                {[0, 25, 50, 75, 100].map((perc, i) => (
                    <SliderLabel
                        key={i}
                        position={perc}
                    >
                        {perc.toString()}
                    </SliderLabel>
                ))}
            </RangeSlider>
        );
    }
}

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

Functionality and Features

Is this article helpful?

Not finding the help you need?

Contact Support