Labels

You can provide names for specific RangeSlider 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 RangeSlider.

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'));