Select a date or numeric range to explore its details in an another detailed view.
Select a range precisely and seamlessly in any form factor with smooth and interactive sliders.
Show ticks, dividers, and labels to indicate the selected values in a more intuitive way.

Trusted by the world’s leading companies

Flutter Flutter Range Slider

Overview

Flutter Range Slider is a highly interactive UI widget for selecting a smaller range from a larger data set. It provides rich features: numeric and date-time ranges, labels, ticks, dividers, and tooltips.

Scale

Select numeric and date ranges. Render intervals with precision for both numeric and date ranges. For dates, from year to second intervals are supported.

Range Slider scale support.

Orientation

Render the range slider in both vertical and horizontal orientation.

Range Slider vertical orientation.

Labels

Easily customize the labels. 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.

Range 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 easily.

Range 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 the values between two intervals easily. You can also customize the positions of tick marks.

Range Slider tick support.

Use tooltips to show more info about the current selection of ranges during interaction. Customize the format, whole text, and visibility using the built-in APIs. You can show tooltips in rectangular or paddle shapes.

Range Slider tooltip support.

Discrete support

Select only discrete numeric and date values.

Range Slider discrete support.

Drag mode

Various drag mode options are available to control thumb dragging. The options are onThumb, betweenThumbs, and both.

Range Slider drag modes.

Inversed

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

Inversed horizontal range slider.

Horizontal

Inversed vertical range slider.

Vertical

Accessibility

The Range Slider is easily accessed by screen readers.

Customization

Customize each element of the Range Slider.

Gradient

Range Slider gradient support.

Ticks

Range Slider tick support.

Thumb

Range Slider thumb support.

All our Flutter UI & DataViz Widgets

GRIDS

DataGrid

DATA VISUALIZATION

CALENDAR

SLIDERS

Editors

SignaturePad

CONVERSATIONAL UI

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

It is amazing framework, and the support is great

Simple, beautiful, excellent support , multi solutions (.net core, flutter..etc) free licence is great.

Ahmad S,

Executive Manager, Small-Business

An amazing graphing library

The tech support when you run into trouble with one of their packages. I was looking for a Data Visualising solution for cross-platform mobile applications. The Syncfusion Flutter package was am easy to use solution.

Rakshak R,

Freelance Software Engineer, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Explore Case Studies

Industry

Software development

75%Cost reduction

50%Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story