• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Theme Selection
Mode Selection
*Translated by Google Translator.

Example of Vertical Orientation in ASP.NET MVC Range Slider Control

This sample demonstrates the rendering of Slider component in Vertical orientation. Drag the thumb over the bar for selecting the values between min and max.


The Slider component can be rendered in either horizontal or vertical orientation and this can be set through the orientation property

The Slider component allows the user to select a value or range of values in-between a min and max range, by dragging the thumb over the slider bar in Vertical orientation. There are three types of sliders available in Vertical Orientation:

  • Default - allows us to select a single value in Vertical Orientation
  • MinRange – allows us to select a single value, but highlights with a range selection from the min value to the current handle value in Vertical Orientation
  • Range – allows us to select a range of values with two handles, where the handles was connected with a range selection in Vertical Orientation
  • Reverse – allows to render the component in reverse order. To utilise this, set the maximum value to the Min property and set the minimum value to the Max property
  • The dragInterval is used to drag both handles using the range bar which is also applicable only to the range slider.

    In this demo we can see the Default, MinRange and Range slider types.

Transform your ASP.NET MVC web apps today with Syncfusion ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing