Controlled Mode

By default, the RangeSlider is in an uncontrolled state.

To manage the state of the RangeSlider:

  1. Use its value property.
  2. Handle the onChange event.
  3. Pass the new value through the props.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

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

class App extends React.Component {
    state = {
        start: 10,
        end: 100
    };

    onChange = newValue => {
        this.setState({
            start: value.start,
            end: newValue
        });
    };

    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}
                        onClick={() => { this.setState({ value }); }}
                    >
                        {perc.toString()}
                    </SliderLabel>
                ))}
            </RangeSlider>
        );
    }
}

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