Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (96)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (110)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (479)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (20)WPF  (121)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (226)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (59)UI  (129)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (213)What's new  (139)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Introducing Vertical Slider and Vertical Range Slider in Flutter

Introducing a Vertical Slider and Vertical Range Slider in Flutter

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 now support vertical orientation with the 2021 Volume 1 release. 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
Vertical Slider and Vertical Range Slider in Flutter

Numeric and date scale

The vertical Slider and Range Slider allow you to have numeric and date scales. For date scales, the intervals span from seconds to years.

Numeric and Date Scales in Flutter Vertical Slider and Range Slider
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. 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
Labels in Flutter Vertical Slider and Range Slider

Dividers

This feature allows you to render dividers 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
Dividers in Flutter Vertical Slider and Range Slider

Ticks

This feature allows you to have both the major and minor 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
Ticks in Flutter Vertical Slider and Range Slider

Tooltip

The 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
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
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
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
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
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 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
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
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 and Range Slider widgets, available in the 2021 Volume 1 release. For more information, refer to the complete user guides for Flutter Slider and Range Slider. You can also check out our Flutter examples for all our widgets. Additionally, check out our demo app for the different platforms AndroidiOSWebWindows, and Linux.

If you need a new widget in the Flutter framework 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 forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top