We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

Flutter Slider is a highly interactive UI Widget, allowing users to select a value from a larger data set. It provides rich features, such as numeric and date-time labels, a thumb icon, ticks, dividers, and tooltips.


Scale

Render intervals with precision for both numbers and dates. For dates, intervals are supported in years through seconds.

Slider scale support.


Orientation

Render the slider in both vertical and horizontal orientation.

Slider vertical orientation.


Labels

Easily customize the labels. Use built-in support for numeric and date types. Customize the format, render at specific intervals, and add prefixes and suffixes. You can also visualize data as text, assigning values like low, medium, and high.

Slider label support.


Dividers

Render dividers in each interval to show the ranges in an intuitive way. Customize the size, shape, and position of the dividers.

Slider divider support.


Ticks

Set both major and minor ticks in the axis. Use major ticks to show the intervals clearly and minor ticks to help choose values between two intervals easily. You can also customize the positions of tick marks.

Slider tick support.


Tooltip

Use tooltips to indicate clearly the current selection during interaction. Customize the format, whole text, and visibility using the built-in APIs.

Slider tooltip support.


Thumb

Select a numeric or date-time value by dragging the thumb. Add text or an icon inside the thumb using the built-in APIs.

Slider thumb icon support.


Discrete support

You are able to select only discrete numeric and date values.

Slider discrete support.


Inversed

Change the minimum and maximum positions of the horizontal and vertical slider in the reverse direction.

Inversed horizontal slider.

Horizontal

Inversed vertical slider.

Vertical


Accessibility

The Slider is easily accessed by screen readers.


Customization

Customize each element of the Slider with ease.

Ticks

Slider tick support.

Thumb

Slider thumb support.

Track and divider size

Slider track and divider support.


Flutter Slider Code Example

Easily get started with the Flutter Slider using a few simple lines of DART code example as demonstrated below. Also explore our Flutter Slider Example that shows you how to render and configure the Slider in Flutter.

double _value = 4.0;
@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: Scaffold(
          body: Center(
              child: SfSlider(
                min: 0.0,
                max: 10.0,
                value: _value,
                interval: 2,
                showLabels: true,
                onChanged: (dynamic newValue) {
                  setState(() {
                    _value = newValue;
                  });
                },
              )
          )
      )
   );
}



Frequently Asked Questions

  • Select a value or range of values using a slider, range slider, or range selector.
  • Use horizontal and vertical sliders.
  • Display numeric and date-time ranges.
  • Select linear or discrete values.
  • Enhance widget readability with ticks and labels.
  • Add an image or a chart as content for quick visualization of the selected data in a range selector.
  • Show a thumb icon, tooltip, and labels to indicate the selected values in a more intuitive way.
  • Select a value or range precisely and seamlessly in any form factor with smooth and interactive sliders.
  • Utilize RTL and accessibility support.
  • Displays perfectly in Android, iOS, web, Windows, macOS, and Linux.
  • Take advantage of superior support, demos, and documentation to save you time.
  • One of the best Flutter Slider in the market that offers feature-rich UI to interact with the software.
  • Make use of user-friendly APIs.
  • Get started with Flutter Slider quickly using documentation and tutorial videos

We do not sell Flutter Slider separately. It is only available for purchase as part of the Syncfusion Flutter suite, which contains an ever-growing set of native Flutter widgets, including Slider. A single developer license for the Syncfusion Essential Studio for Flutter suite costs $995.00 USD, including one year of support and updates. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team to see if you qualify for any additional discounts.

You can find our Flutter Slider demo here.

No, our Flutter widgets, including Slider, are not sold individually, only as a single package. However, we have competitively priced the package so it only costs a little bit more than what some other vendors charge for their Slider alone. We have also found that, in our experience, our customers usually start off using one of our products and then expand to several products quickly, so we felt it was best to offer all the Flutter widgets for a flat fee of $995/developer. On top of this, we might be able to offer additional discounts based on currently active promotions. Please contact our sales team to see if you qualify for any additional discounts.

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

A good place to start would be our comprehensive getting started documentation.

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile