Labels

You can provide names for specific Slider values by defining labels along the track.

The labels are rendered by the SliderLabel Component. The SliderLabel properties allow you to configure the content, position, title, and click handler of the Slider.

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

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

class App extends React.Component {
    state = {
        val: 7
    };

    change = (e) => {
        this.setState({
            val: e.value
        });
    }

    render() {
        return (
            <Slider
                buttons={true}
                step={1}
                min={1}
                max={10}
                value={this.state.val}
                onChange={this.change}
            >
                {[ 1, 5.5, 8, 10 ].map((perc, i) => (
                    <SliderLabel
                        key={i}
                        position={perc}
                        onClick={() => { this.setState({ val: perc }); }}
                    >
                        {perc.toString()}
                    </SliderLabel>
                ))}
            </Slider>
        );
    }
}

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