--- title: "Introducing a Vertical Slider and Vertical Range Slider in Flutter" published_at: "2021-04-23T10:00:50+00:00" modified_at: "2026-02-10T08:56:37+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-a-vertical-slider-and-vertical-range-slider-in-flutter" excerpt: "Last year, we released the Flutter Slider and Range Slider widgets with wide customization options and continued to add more features in further releases. Now, we have provided another important update to these sliders. The Flutter Slider and Range Slider..." taxonomy_category: - "Desktop" - "Flutter" - "Mobile" - "What's new" taxonomy_post_tag: - "Android" - "Flutter" - "iOS" - "Mobile" - "Range Slider" --- # Introducing a Vertical Slider and Vertical Range Slider in Flutter [Mohamed Samsudeen](https://www.syncfusion.com/blogs/author/mohamedks) ![Introducing Vertical Slider and Vertical Range Slider in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Introducing-Vertical-Slider-and-Vertical-Range-Slider-in-Flutter.png) Last year, we released the [Flutter Slider](https://www.syncfusion.com/flutter-widgets/flutter-slider) and [Range Slider](https://www.syncfusion.com/flutter-widgets/flutter-range-slider) widgets with wide customization options and continued to add more features in further releases. Now, we have provided another important update to these sliders. The Flutter Slider and Range Slider now support vertical orientation with the [2021 Volume 1 release](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download) . And their existing features are available in a vertical orientation as well. In this blog post, we will see an overview of available features and how to render these slider widgets vertically. ![Vertical Slider and Vertical Range Slider in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Vertical-Slider-and-Vertical-Range-Slider-in-Flutter.png) Vertical Slider and Vertical Range Slider in Flutter ## Numeric and date scale The vertical Slider and Range Slider allow you to have [numeric](https://help.syncfusion.com/flutter/range-slider/interval#numeric-interval) and [date](https://help.syncfusion.com/flutter/range-slider/interval#date-interval) scales. For date scales, the intervals span from seconds to years. ![Numeric and Date Scales in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Numeric-and-Date-Scales-in-Flutter-Vertical-Slider-and-Range-Slider.png) Numeric and Date Scales in Flutter Vertical Slider and Range Slider ## Labels The vertical Slider and Range Slider allow you to completely customize the [labels](https://help.syncfusion.com/flutter/range-slider/labels-and-divisor) . Built-in support for labels can be used based on chosen numeric and date types. You can customize the format, render specific intervals, and add prefixes and suffixes to the labels. You can also use text as labels, such as low, normal, and critical. ![Labels in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Labels-in-Flutter-Vertical-Slider-and-Range-Slider.png) Labels in Flutter Vertical Slider and Range Slider ## Dividers This feature allows you to render [dividers](https://help.syncfusion.com/flutter/range-slider/labels-and-divisor#show-divisors) in each interval to split the scale for better readability. You can also easily customize the size, shape, and position of the dividers. ![Dividers in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Dividers-in-Flutter-Vertical-Slider-and-Range-Slider.png) Dividers in Flutter Vertical Slider and Range Slider ## Ticks This feature allows you to have both the [major and minor ticks](https://help.syncfusion.com/flutter/range-slider/ticks) in the scales. You can use major ticks to show the intervals clearly in the scale and minor ticks to help the end user select a value between two intervals easily. ![Ticks in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Ticks-in-Flutter-Vertical-Slider-and-Range-Slider.png) Ticks in Flutter Vertical Slider and Range Slider ## Tooltip The [tooltip](https://help.syncfusion.com/flutter/range-slider/tooltip) feature allows you to clearly indicate the currently selected values during the interaction. You can also customize the format, text, position (left or right), and visibility of tooltips using the built-in APIs. ![Tooltips in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Tooltips-in-Flutter-Vertical-Slider-and-Range-Slider.jpg) Tooltip in Flutter Vertical Slider and Range Slider ## Thumb icons This feature allows you to add any type of custom widget, like an icon or text, as a child. ![Thumb Icons in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Thumb-Icons-in-Flutter-Vertical-Slider-and-Range-Slider.png) Thumb Icons in Flutter Vertical Slider and Range Slider ## Discrete values This feature allows you to discretely select numeric and date values in the Slider and Range Slider. By default, a value is selected continuously. However, the value selection can be restricted to discrete values as shown in the following image. ![Selecting Discrete Values in Flutter Vertical Slider and Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Selecting-Discrete-Values-in-Flutter-Vertical-Slider-and-Range-Slider.gif) Selecting Discrete Values in Flutter Vertical Slider and Range Slider ## Interval selection You can select a particular interval in the vertical Range Slider by tapping. Then, both the thumbs will move to the current interval with animation. ![Selecting Intervals in Flutter Vertical Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Selecting-Intervals-in-Flutter-Vertical-Range-Slider.gif) Selecting Intervals in Flutter Vertical Range Slider ## Customization We can fully customize the vertical Slider and Range Slider using the provided APIs and override methods. In the following image, we have done a custom drawing for the thumbs, dividers, and ticks. ![Customized Flutter Vertical Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Customized-Flutter-Vertical-Range-Slider.png) Customized Flutter Vertical Range Slider ## Getting started with the vertical Slider and Range Slider This section explains how to add the Flutter vertical Slider and Range Slider to your application and use its basic features. ### Step 1: Add the dependency First, add the [Syncfusion Flutter Sliders](https://pub.dev/packages/syncfusion_flutter_sliders) dependency to your **pubspec.yaml** file. ``` dependencies: syncfusion_flutter_sliders: ^19.1.56-beta //Use the latest available version in pub.dev ``` ### Step 2: Get the packages Then, run the following command to get the required packages. ``` $ flutter pub get ``` ### Step 3: Import the library Now, import the library using the following code. ``` import 'package:syncfusion_flutter_sliders/sliders.dart'; ``` ### Step 4: Add Vertical Slider Add the vertical Slider with the desired elements such as ticks, labels, and tooltips, as shown in the following code example. ``` double _value = 40.0; @override Widget build(BuildContext context) { return SfSlider.vertical( min: 0.0, max: 100.0, value: _value, interval: 20, showTicks: true, showLabels: true, showTooltip: true, minorTicksPerInterval: 1, onChanged: (dynamic value){ setState(() { _value = value; }); }, ); } ``` ![Flutter Vertical Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Flutter-Vertical-Slider.png) Flutter Vertical Slider **Note:** This example is shown with the numeric scale. You can customize it to display a date-time scale. ### Step 5: Add Vertical Range Slider Now, add the vertical Range Slider with the desired elements such as ticks, labels, and tooltips, as in the following code example. ``` SfRangeValues _currentValues = SfRangeValues( DateTime(2010, 01, 01), DateTime(2013, 01, 01)); @override Widget build(BuildContext context) { SfRangeSlider.vertical( min: DateTime(2011, 01, 01), max: DateTime(2014, 01, 01), dateFormat: DateFormat.y(), values: _currentValues, interval: 1, dateIntervalType: DateIntervalType.years, showTicks: true, minorTicksPerInterval: 1, enableTooltip: true, onChanged: (dynamic values) { setState(() { _currentValues = values; }); }, ); } ``` ![Flutter Vertical Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Flutter-Vertical-Range-Slider.png) Flutter Vertical Range Slider **Note:** This example is shown with the date-time scale. You can customize it to display a numeric scale. ### Handle value changes During user interaction, when the values of the Slider and the Range Slider are updated, the **onChanged** event will be called. The Slider and the Range Slider then pass the new values to the callback, but this does not change their state until the parent widget rebuilds them with the new values. Use the ** setState** method, as shown in the previous code example, to achieve this. **Note:** If the ** onChanged** value is null, then the Slider and Range Slider will be disabled. ## Conclusion Thanks for reading! In this blog post, we have introduced the new vertical orientation support in our [Flutter Slider](https://www.syncfusion.com/flutter-widgets/flutter-slider) and [Range Slider](https://www.syncfusion.com/flutter-widgets/flutter-range-slider) widgets, available in the [2021 Volume 1 release](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download) . For more information, refer to the complete [user guides for Flutter Slider](https://help.syncfusion.com/flutter/slider/overview) and [Range Slider](https://help.syncfusion.com/flutter/range-slider/overview) . You can also check out our [Flutter examples](https://github.com/syncfusion/flutter-examples) for all our widgets. Additionally, check out our demo app for the different platforms [Android](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples) , [iOS](https://apps.apple.com/us/app/syncfusion-flutter-ui-widgets/id1475231341) , [Web](https://flutter.syncfusion.com/) , [Windows](https://www.microsoft.com/store/productId/9NHNBWCSF85D) , and [Linux](https://snapcraft.io/syncfusion-flutter-gallery) . If you need a new widget in the [Flutter framework](https://www.syncfusion.com/flutter-widgets) or new features in our existing widgets, including the Slider and Range Slider, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/flutter) . We are always happy to assist you! ## Related blogs - [What’s New in 2021 Volume 1: Flutter](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-1-flutter.aspx) - [Introducing the New Flutter Treemap Widget](https://www.syncfusion.com/blogs/post/introducing-the-new-flutter-treemap-widget.aspx) - [Introducing the New Flutter Linear Gauge Widget](https://www.syncfusion.com/blogs/post/introducing-flutter-linear-gauge-widget.aspx) - [How to Create a Choropleth Map in a Flutter Application](https://www.syncfusion.com/blogs/post/create-choropleth-map-using-in-flutter.aspx) - [Create Different Styles of Radial Sliders Using Flutter Radial Gauge](https://www.syncfusion.com/blogs/post/create-different-styles-of-radial-sliders-using-flutter-radial-gauge.aspx)