Inputs / Slider / Orientation
material theme

Orientation

The Slider 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 { Slider, SliderLabel } from '@progress/kendo-react-inputs';

class App extends React.Component {
    render() {
        return (
            <Slider
                vertical={true}
                buttons={true}
                step={1}
                defaultValue={7}
                min={1}
                max={10}
            >
                <SliderLabel position={1}>1</SliderLabel>
                <SliderLabel position={3}>3</SliderLabel>
                <SliderLabel position={5}>5</SliderLabel>
                <SliderLabel position={7}>7</SliderLabel>
                <SliderLabel position={10}>10</SliderLabel>
            </Slider>
        );
    }
}

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

In this article

 /