Controlled Mode

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

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

class App extends React.Component {
    state = { value: 7 };
    onChange = event => {
      this.setState({ value: event.value });
    };

    render() {
        return (
          <Tooltip anchorElement="target" position="bottom">
            <Slider
                min={1}
                max={10}
                step={1}
                value={this.state.value}
                onChange={this.onChange}
            >
                {[ 1, 3, 5, 6, 10 ].map(value => (
                    <SliderLabel
                        title={value}
                        key={value}
                        position={value}
                        onClick={() => { this.setState({ value }); }}
                    />
                ))}
            </Slider>
          </Tooltip>
        );
    }
}

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