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

What’s New in Flutter Slider and Range Slider: 2021 Volume 3

We are updating our Syncfusion Flutter Sliders package by adding new features in each release to make the widgets suitable for all kinds of uses. The 2021 Volume 3 release brings these updates to our Flutter Slider and Range Slider widgets:

Drag mode in Flutter Range Slider

Various drag mode options have been provided in our Flutter Range Slider to control thumb dragging with the dragMode property. The available drag modes are:

  • On thumb
  • Between thumbs
  • Both thumbs

Refer to the following code.

SfRangeValues _values = const SfRangeValues(40.0, 60.0);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Drag mode range slider')),
    body: SfRangeSlider(
      min: 0,
      max: 100,
      // Set the drag mode.
      dragMode: SliderDragMode.onThumb,
      interval: 20,
      values: _values,
      showLabels: true,
      showTicks: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ),
  );
}

On thumb

When the dragMode is set to SliderDragMode.onThumb, you can move only the individual thumbs by separately dragging them like in the following GIF image.

on thumb drag mode in Flutter Range Slider

Between thumbs

When the dragMode is set to SliderDragMode.betweenThumbs, we can move both the thumbs at the same time by dragging in the area between the start and end thumbs.   

Between thumbs darg mode in Flutter Range Slider

Both thumbs

When the dragMode is set to SliderDragMode.both, we can move an individual thumb, and also both the thumbs at the same time by dragging in the area between the start and end thumbs.

Both thumbs drag mode in Flutter Range Slider

Note: For more details, check out the drag modes in the Flutter Range Slider demo.

Inversed Flutter Vertical Slider

From the 2021 Volume 3 onward, you can inverse the Flutter Vertical  Slider widget with the isInversed property.

Refer to the following code example.

double _value = 40.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Inversed Vertical Slider')),
    body: SfSlider.vertical(
      min: 0,
      max: 100,
      value: _value,
      interval: 20,
      // Set the inversed property.
      isInversed: true,
      showTicks: true,
      showLabels: true,
      onChanged: (dynamic newValue) {
        setState(() {
          _value = newValue;
        });
      },
    ),
  );
}
Vertical SliderInversed Vertical Slider
Flutter Vertical SliderInversed Flutter Vertical Slider

Note: For more details, interact with our live demo for inversing the Flutter Vertical Slider.

Inversed Flutter Vertical Range Slider

Similar to the Flutter Slider widget, you can also inverse the Vertical Range Slider by setting the isInversed property to true.

Refer to the following code example.

SfRangeValues _values = SfRangeValues(20.0, 60.0);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body:  SfRangeSlider.vertical(
      min: 0,
      max: 100,
      values: _values,
      interval: 20,
      // Set the inversed property
      isInversed: true,
      showTicks: true,
      showLabels: true,
      onChanged: (SfRangeValues newValues) {
        setState(() {
          _values = newValues;
        });
      },
    ),
  );
}
Vertical Range SliderInversed Vertical Range Slider
Flutter Vertical Range SliderFlutter Inversed Vertical Range Slider

Note: For more details, interact with our live demo for inversing the Flutter Vertical Range Slider.

How to inverse the horizontal sliders

To inverse the horizontal sliders, you can use the textDirection property in the Directionality widget.

For more details, refer to the documentation:

Conclusion

In this blog post, we have seen the new updates to our Flutter Slider and Range Slider widgets rolled out in the 2021 Volume 3 release. Information on these features is also available in our Release Notes and What’s New pages. Try out these new features and leave your feedback in the comments section below!

For current customers, the newest version of Essential Studio is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features.

Also, you can contact us through our support forumsDirect-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