Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (84)Azure  (27)Blazor  (50)DocIO  (18)Essential JS 2  (65)Essential Studio  (159)Flutter  (53)JavaScript  (135)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (403)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (106)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (235)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (25)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (141)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (18)UI  (66)Uncategorized  (68)Unix  (2)User interface  (49)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (101)What's new  (62)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
A New Flutter Slider Widget to Select Date and Numeric Vales

A New Flutter Slider Widget to Select Date and Numeric Values

In our previous release, we introduced a pair of slider widgets for Flutter that allow you to select a range of values, the Range Slider and Range Selector. In our 2020 Volume 2 release, we are adding a third one to the package, the Slider widget. You can find the beta version of the Syncfusion Flutter Slider package on pub.dev.

The Syncfusion Flutter Slider widget is written natively in Dart. It is a lightweight and highly interactive UI control that allows users to select a single value between a minimum and maximum.

How does it differ from the Range Slider and Range Selector?

The new Slider widget selects a single value, and includes support for both date-time and numeric values. The Range Slider and Range Selector widgets can only be used to select a range of values.

Note: Even though Flutter for web is still in beta, our new Slider supports web platforms in addition to the iOS and Android platforms like all of our Flutter widgets.

The following key features are available in this widget:

  • Numeric and date scales
  • Thumb with icon
  • Labels
  • Divisors
  • Ticks
  • Tooltips with different shapes
  • Customization

Let’s briefly discuss the features of this new Slider widget in its initial release. Then, we’ll walk through the steps to add the widget to your application.

Numeric and date scales

This feature allows you to select numeric and date values. You can render precise intervals for both types of values.

Note: For date values, it is possible to render intervals spanning from years to seconds.

You can easily customize the formats of values, render specific intervals, and add prefixes and suffixes. You can also visualize the values as text.

Numeric and Date Scales

Thumb

This feature allows you to easily interact with the Slider to select a value. It is possible to customize the size, color, and shape of the thumb based on your requirements using the built-in APIs. It also accepts custom widgets like an icon or text as a child.

Thumb with Icon and Text View
Thumb with Icon and Text View

Divisors

This feature allows you to render divisors in each interval to present the values in an intuitive way. You can also easily customize the size, shape, and position of the divisors.

Divisors

Ticks

This feature allows you to set values for two types of ticks on the scale.:

  • Major ticks: Show the value intervals clearly.
  • Minor ticks: Help users select a value between two intervals.

It is also possible to customize the positions of ticks.

Major and Minor Ticks
Major and Minor Ticks

Tooltips

This feature allows you to clearly indicate the current value of the Slider while interacting with it. Two types of tooltip shapes are supported:

  • Rectangular
  • Paddle

You can select the type of tooltip based on the style of your application. It is also possible to customize the format, text, and visibility of tooltips using the built-in APIs.

Tooltips with Rectangular and Paddle Shapes

Discrete selection

This feature allows you to discretely select numeric and date values using the Slider. By default, the value is selected continuously. However, in some cases, the value selection has to be restricted for certain values as shown in the following image.

Discrete Value Selection

RTL

This feature allows you to arrange the scale values and move the thumb from right to left (RTL). This is helpful for users who are working in the right-to-left languages like Hebrew, Arabic, and others.

Right to Left Direction Selection Support in Slider
Right to Left Direction Selection Support in Slider

Customization

All the elements of the Slider can be customized using the following:

  • Built-in, straightforward APIs.
  • Override methods provided for every element.

The following image shows off some of the customizations that can be done in the Slider. You can customize the slider well beyond what is shown based on the requirements of your application.

Slider Elements Customization
Slider Elements Customization

How to add Flutter Slider to your application

This section explains how to add the Flutter Slider widget to your application and use its basic features.

Step 1: Add the dependency

Add the Syncfusion Flutter Sliders dependency to your pubspec.yaml file.

dependencies:
  syncfusion_flutter_sliders: ^18.2.0.44-beta   

Step 2: Get the packages

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 Slider to the widget tree

After importing the library, initialize the SfSlider as a child of any widget, such as the Center widget as shown in the following code example.

@override
Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child:SfSlider()
           )
       )
   );
}

Step 5: Enable Slider elements

Enable the desired elements such as ticks, labels, and tooltips as in the following code example.

double _value = 40.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar(
       title: const Text('Syncfusion Flutter Slider'),
     ),
     body: SfSlider(
       min: 0.0,
       max: 100.0,
       value: _value,
       interval: 20,
       showTicks: true,
       showLabels: true,
       showTooltip: true,
       minorTicksPerInterval: 1,
       onChanged: (dynamic value){
         setState(() {
           _value = value;
         });
       },
     ),
   );
}

Handle value changes

During user interaction, when the value of the Slider is updated, the onChanged event will be called. The Slider then passes the new value to the callback, but it does not change its state until the parent widget rebuilds the Slider with the new value. This can be done using the setState method as shown in the previous code example.

Note: If the onChanged value is null, then the Slider will be disabled.

Handling a Value Change in the Slider
Handling a Value Change in the Slider

Conclusion

In this blog post, we discussed the new Syncfusion Flutter Slider and its features. This widget is available in the 2020 Volume 2 release. You can find the complete user guide here, and you can also check out our other samples in this GitHub location. Additionally, you can download and check out our demo app in  Google Play and the App Store.

Also, if you need a new widget for the Flutter framework or new features in our existing widgets, including the 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!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top