--- title: "What’s New in Flutter Slider and Range Slider: 2021 Volume 3" published_at: "2021-10-18T11:12:01+00:00" modified_at: "2026-01-19T09:23:06+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-flutter-slider-and-range-slider-2021-volume-3" excerpt: "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..." taxonomy_category: - "Desktop" - "Flutter" - "Mobile" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "Flutter" - "Mobile" - "Range Slider" - "slider" - "Web Development" --- # What’s New in Flutter Slider and Range Slider: 2021 Volume 3 [Meikanda Nayanar I](https://www.syncfusion.com/blogs/author/meikandai) ![What’s New in Flutter Slider and Range Slider: 2021 Volume 3](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/What%E2%80%99s-New-in-Flutter-Slider-and-Range-Slider-2021-Volume-3.png) We are updating our Syncfusion [Flutter Sliders package](https://pub.dev/packages/syncfusion_flutter_sliders) by adding new features in each release to make the widgets suitable for all kinds of uses. The [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download) release brings these updates to our [Flutter Slider](https://www.syncfusion.com/flutter-widgets/flutter-slider) and [Range Slider](https://www.syncfusion.com/flutter-widgets/flutter-range-slider) widgets: - [Drag mode in Flutter Range Slider](#drag-mode-in-flutter-range-slider) - [Inverse support in Flutter Vertical Slider](#inversed-flutter-vertical-slider) - [Inverse support in Flutter Vertical Range Slider](#inversed-flutter-vertical-range-slider) ## 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](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) 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](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to [SliderDragMode.onThumb](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderDragMode.html) , 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/on-thumb-drag-mode-in-Flutter-Range-Slider.gif) ### Between thumbs When the [dragMode](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to [SliderDragMode.betweenThumbs](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderDragMode.html) , 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Between-thumbs-darg-mode-in-Flutter-Range-Slider.gif) ### Both thumbs When the [dragMode](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSlider/dragMode.html) is set to [SliderDragMode.both](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SliderDragMode.html) , 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Both-thumbs-drag-mode-in-Flutter-Range-Slider.gif) **Note:** For more details, check out the [drag modes in the Flutter Range Slider demo](https://flutter.syncfusion.com/#/range-slider/basic-features/drag-mode) . ## Inversed Flutter Vertical Slider From the 2021 Volume 3 onward, you can inverse the Flutter Vertical Slider widget with the [isInversed](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfSlider/isInversed.html) 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 Slider | Inversed Vertical Slider | | --- | --- | | | | **Note:** For more details, interact with our [live demo for inversing the Flutter Vertical Slider](https://flutter.syncfusion.com/#/vertical-slider/basic-features/default) . ## 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 Slider | Inversed Vertical Range Slider | | --- | --- | | | | **Note:** For more details, interact with our [live demo for inversing the Flutter Vertical Range Slider](https://flutter.syncfusion.com/#/vertical-range-slider/basic-features/default) . ## How to inverse the horizontal sliders To inverse the horizontal sliders, you can use the [textDirection](https://api.flutter.dev/flutter/widgets/Directionality/textDirection.html) property in the [Directionality](https://api.flutter.dev/flutter/widgets/Directionality-class.html) widget. For more details, refer to the documentation: - [Inversing the horizontal Slider](https://help.syncfusion.com/flutter/slider/getting-started#inverse-the-horizontal-slider) - [Inversing the horizontal Range Slider](https://help.syncfusion.com/flutter/range-slider/getting-started#inverse-the-horizontal-range-slider) ## Conclusion In this blog post, we have seen the new updates to our [Flutter Slider](https://www.syncfusion.com/flutter-widgets/flutter-slider) and [Range Slider](https://www.syncfusion.com/flutter-widgets/flutter-range-slider) widgets rolled out in the [2021 Volume 3](https://www.syncfusion.com/forums/169291/essential-studio-2021-volume-3-main-release-v19-3-0-43-is-available-for-download) release. Information on these features is also available in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v19.3.0.43) and [What’s New](https://www.syncfusion.com/products/whatsnew) 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](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out the available features. Also, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/home) . We are always happy to assist you! ## Related blogs - [Syncfusion Essential Studio® 2021 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2021-volume-3-is-here.aspx) - [What’s New in 2021 Volume 3: Flutter DataGrid](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-3-flutter-datagrid.aspx) - [What’s New in 2021 Volume 3: Flutter Date Range Picker](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-3-flutter-date-range-picker.aspx) - [Flutter Q&A with Chris Sells, Senior Product Manager at Google on Flutter – Part 2 [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/flutter-qa-with-chris-sells-senior-product-manager-at-google-on-flutter-part-2-webinar-show-notes.aspx)