Orientation

The RangeSlider supports a horizontal and a vertical mode of orientation.

By default, the component is in its horizontal mode. To enable the vertical mode, set the vertical property to true.

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}
                vertical={true}
            >
                {[0, 25, 50, 75, 100].map((perc, i) => (
                    <SliderLabel
                        key={i}
                        position={perc}
                    >
                        {perc.toString()}
                    </SliderLabel>
                ))}
            </RangeSlider>
        );
    }
}

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