Flutter Range Slider Beautiful Customization With Example

Let’s talk about flutter range slider customization but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter syncfusion range and single sliders, what they really are, their role, and usage in flutter apps and finally the mentioned flutter range and single slider example.

Introduction

Flutter sliders is a very beautiful and user friendly way of getting data from user. User just have to slide the slider to specify the particular value. If the slider is a range slider, then user can specify the first and last slider e.g. if some specific range of age is required then user can slide the first point of slider to let’s say 18 years and the second one to 35 years. So, in this way, all the age group that lies within that range will be taken. Let’s see how to import and implement our range slider and a single slider.

Import Syncfusion Flutter Sliders

syncfusion_flutter_sliders: ^19.4.55

Write this line in the dependencies section of your pubspec.yaml and run pub get to import the package in your app.

To get the latest version, you can visit here.

Implementation

We will user two sliders in this example:

Flutter Syncfusion Range Slider
Flutter Syncfusion Single Slider

We will explain range slider in this article and would love to see you practice the single slider. Don’t worry, it will be implemented in the source code as well, so if you feel like stuck then you can check it out in the source code that will be provided. Let’s now implement our syncfusion range slider in our app.

Syncfusion Range Slider

 SfRangeSlider(

                  min: 0,

                  max: 100,

                  values: SfRangeValues(0, 100),

                  onChanged: (value) {},

                )

We have used the sf range slider class, in which:

min constructor defines the minimum amount that the user can select.
max constructor defines the max amount that the user can select.
Values constructor defines the current selected values in the slider using the thumbs(these two small circles in the slider).
On changed constructor is called when the user drags one of the thumb to select a new value.

As you can see, by implementing this code, we now see a blue slider in our screen, having two thumbs which are not yet slidable, to make them slidable, we have to give dynamic values to our values constructor using the on changed constructor.

Dynamic Values In Range Slider

SfRangeSlider(
                  min: 0,
                  max: 100,
                  values: SfRangeValues(rangeStart, rangeEnd),
                  onChanged: (value) {
                    setState(() {
                      rangeStart = value.start;
                      rangeEnd = value.end;
                    });
                  },
                )

We have defined two double values of names range start and range end and have given the range start a value of 0 and range end a value of 100. We now have used them in our values constructor using the sf range values class which takes two arguments, first one is the starting range and second one the ending range. Now we want to specify the values dynamically in our two variables so we have used them within the on changed constructor and by using the argument that the on changed function has. We can take the value of start and end from that argument and have given it to our range start and range end. To see this value changes in the real time, we have used the set state which rebuild or update the state every time it is called.

Tool Tip Of Range Slider

enableTooltip: true

Enable too tip contructor specified whether the tool tip should be show or not in the slider. By default, it is false, making it true will show the tooltip when the drag occurs.

Tool Tip Customization

 SfRangeSliderTheme(
                  data: SfRangeSliderThemeData(
                    tooltipBackgroundColor: Colors.white,
                    tooltipTextStyle: TextStyle(
                        color: Color(0xffF5B7B1),
                        fontSize: 12,
                        fontWeight: FontWeight.w600),
                  ),
                 child: SfRangeSlider(
                         // the slider that we are currently working on
))

As you can see, we have wrapped our sf range slider with a sf range slider theme class, using its data constructor, we can customize the theme data of our sf range slider.

Too tip background color constructor is used to change the background color of our tool tip, we have specified it to white.
Too tip text style constructor is used to style text text that appears in the tool tip, we have customize the text color, size and weight, you can choose your values depending on the design that you want to get.
import ‘package:syncfusion_flutter_core/theme.dart’; Import the theme in case you don’t see it in suggestions.

Let’s see how our tool tip looks now when we drag our slider:

Tool Tip Text Formatter Callback

tooltipTextFormatterCallback: (actualValue, formattedText) {

                      double d = actualValue;

                      return '${d.toStringAsFixed(0)} years old';

                    }

The tooltip text formatter constructor is used formatting or changing the label text of the tooltip.

The value that is given without proper formatting in in actual value. It can be a double or a date time etc.
The formatted text is in a proper format based on the value i.e. double of date time etc.

Now when you slide the thumbs of the slider, you will see an update in the values of both thumbs tooltip, as we have returned a string having the actual value and by specifying the toStringAsFixed function to zero means there will be no numbers after the period(.) e.g. 2.54 will become 2.

Drag Mode

dragMode: SliderDragMode.both

Using the drag mode constructor of the sf range slider class, we can specify whether we want to do the dragging action by dragging the thumb or the slider path or both.

dragMode: SliderDragMode.onThumb Drag using thumb
dragMode: SliderDragMode.betweenThumbs Drag using the slider path between the two thumbs
dragMode: SliderDragMode.both Drag using both, either we can use thumb or the sliding path

Active Color

activeColor: Color(0xffF5B7B1)

Using the active color constructor of the sf range slider, we can change the color of the active region of the slider, as we can see in the example that the active slider and color of both the thumbs are now changed.

Start Thumb Icon

 startThumbIcon: Container(
                      decoration: BoxDecoration(
                          color: Colors.white, shape: BoxShape.circle),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Color(0xffF5B7B1), shape: BoxShape.circle),
                        margin: EdgeInsets.all(3),
                      ),
                    )

colored range slider start thumb customized

By using the start thumb icon constructor, we can customize our start thumb, as you can see, we have used a container widget in it. We have customized our container and given it a margin so it will have some margin from the pre defined thumb icon shape. You can see the customized start thumb in the above image.

End thumb Icon

 endThumbIcon: Container(
                      decoration: BoxDecoration(
                          color: Colors.white, shape: BoxShape.circle),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Color(0xffF5B7B1), shape: BoxShape.circle),
                        margin: EdgeInsets.all(3),
                      ),
                    )

colored range slider start and end thumb customized

Same customization done like we have done for the start thumb. We use the end thumb icon constructor to customized the end thumb. We can see that our both thumbs are now customized.

Show Always Tool Tip

shouldAlwaysShowTooltip: true

Using the should always show tooltip constructor will make the tooltip visible even if you are not dragging the thumbs or slider.

Congrats,We now have achieved our mentioned design, below is the complete source code in which a single slider complete implementation is also given.

Source Code

import 'package:flutter/material.dart';

import 'package:syncfusion_flutter_sliders/sliders.dart';

import 'package:syncfusion_flutter_core/theme.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter  Beautiful Slider',

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);

  @override

  State<HomePage> createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  double singleSlideValue = 0;

  double rangeStart = 0;

  double rangeEnd = 100;

  @override

  Widget build(BuildContext context) {

    return SafeArea(

        child: Scaffold(

            backgroundColor: Color(0xffFDEDEC),

            body: Column(

              mainAxisAlignment: MainAxisAlignment.center,

              children: [

                Text(

                  'Range Slider',

                  style: TextStyle(

                      shadows: [

                        Shadow(

                            blurRadius: 4,

                            color: Colors.black12,

                            offset: Offset(2, 2))

                      ],

                      color: Color(0xffF5B7B1),

                      fontSize: 28,

                      fontWeight: FontWeight.bold),

                ),

                SizedBox(

                  height: 30,

                ),

                SfRangeSliderTheme(

                  data: SfRangeSliderThemeData(

                    tooltipBackgroundColor: Colors.white,

                    tooltipTextStyle: TextStyle(

                        color: Color(0xffF5B7B1),

                        fontSize: 12,

                        fontWeight: FontWeight.w600),

                  ),

                  child: SfRangeSlider(

                    shouldAlwaysShowTooltip: true,

                    dragMode: SliderDragMode.both,

                    tooltipTextFormatterCallback: (actualValue, formattedText) {

                      double d = actualValue;

                      return '${d.toStringAsFixed(0)} years old';

                    },

                    enableTooltip: true,

                    min: 0,

                    max: 100,

                    activeColor: Color(0xffF5B7B1),

                    startThumbIcon: Container(

                      decoration: BoxDecoration(

                          color: Colors.white, shape: BoxShape.circle),

                      child: Container(

                        decoration: BoxDecoration(

                            color: Color(0xffF5B7B1), shape: BoxShape.circle),

                        margin: EdgeInsets.all(3),

                      ),

                    ),

                    endThumbIcon: Container(

                      decoration: BoxDecoration(

                          color: Colors.white, shape: BoxShape.circle),

                      child: Container(

                        decoration: BoxDecoration(

                            color: Color(0xffF5B7B1), shape: BoxShape.circle),

                        margin: EdgeInsets.all(3),

                      ),

                    ),

                    values: SfRangeValues(rangeStart, rangeEnd),

                    onChanged: (value) {

                      setState(() {

                        rangeStart = value.start;

                        rangeEnd = value.end;

                      });

                    },

                  ),

                ),

             

                SizedBox(height: 50),

                Text(

                  'Single Slider',

                  style: TextStyle(

                      shadows: [

                        Shadow(

                            blurRadius: 4,

                            color: Colors.black12,

                            offset: Offset(2, 2))

                      ],

                      color: Color(0xffF5B7B1),

                      fontSize: 28,

                      fontWeight: FontWeight.bold),

                ),

                SizedBox(

                  height: 30,

                ),

                SfSliderTheme(

                  data: SfRangeSliderThemeData(

                      tooltipBackgroundColor: Colors.white,

                      tooltipTextStyle: TextStyle(

                          color: Color(0xffF5B7B1),

                          fontSize: 13,

                          fontWeight: FontWeight.w600)),

                  child: SfSlider(

                    value: singleSlideValue,

                    tooltipShape: SfRectangularTooltipShape(),

                    tooltipTextFormatterCallback: (actualValue, formattedText) {

                      double d = actualValue;

                      return d.toStringAsFixed(0);

                    },

                    enableTooltip: true,

                    min: 0,

                    max: 100,

                    activeColor: Color(0xffF5B7B1),

                    thumbIcon: Container(

                      decoration: BoxDecoration(

                          color: Color(0xffF5B7B1), shape: BoxShape.circle),

                      child: Container(

                        decoration: BoxDecoration(

                            color: Colors.white, shape: BoxShape.circle),

                        margin: EdgeInsets.all(3),

                      ),

                    ),

                    onChanged: (value) {

                      setState(() {

                        singleSlideValue = value;

                      });

                    },

                  ),

                )

              ],

            )));

  }

}

Note:

That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.