# Orientation Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox. ## Content By default, the RangeSlider control is displayed horizontally. However, you can change the orientation of the RangeSlider control and set it to Vertical by using [Orientation](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Input/C1.Blazor.Input.C1RangeSlider.Orientation.html) property of the [C1RangeSlider](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Input/C1.Blazor.Input.C1RangeSlider.html) class. The **Orientation** property accesses the [SliderOrientation](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Input/C1.Blazor.Input.SliderOrientation.html) enumeration to set the orientation of the control. The following image showcases the RangeSlider control with vertical orientation. ![Vertical orientation of C1RangeSlider](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/rangeslider-orientation.png) To display the RangeSlider control vertically, use the following code. This example uses the sample created in the [Range](/componentone/docs/blazor/online-blazor/controls/input-controls/rangeslider/rangeslider-range) topic. ```razor ```