Flutter Range Slider

A Range Slider that you can customize with the options you need, without any limits. You can also customize the appearance of the Range Slider with simple smooth animations, providing a nice and clean UI/UX.

Getting Started

To install, add it to your pubspec.yaml file:


import 'package:range_slider_flutter/range_slider_flutter.dart';

How to use it

call flutter_range_slider's constructor:

basic implementation

            // key: Key('3343'),
            values: [_lowerValue, _upperValue],
            rangeSlider: true,
            tooltip: RangeSliderFlutterTooltip(
              alwaysShowTooltip: true,
            max: 20000,
            textPositionTop: -100,
            handlerHeight: 30,
              activeTrackBarHeight: 10,
              inactiveTrackBarHeight: 10,
              activeTrackBar: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.red,
              inactiveTrackBar: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey,

            min: 0,
            fontSize: 15,
            onDragging: (handlerIndex, lowerValue, upperValue) {
              _lowerValue = lowerValue;
              _upperValue = upperValue;
              setState(() {});

The constructor has an attributes related to the Widget:

  • values: A list of tabs to display, ie Min Valueand Max value
  • rangeSlider:bool to convert the slider to Range Slider if not it's just Slider.
  • tooltip:the range value is always true change it if you want it to hidden.
  • max:Max Range.
  • textPositionTop: The positions of the text box (use -ve integer).
  • handlerHeight:The size of range bull point.
  • trackBar:decoration for the Flutter Range Slider.
  • min: Min Range.
  • fontSize: label Font Size.
  • onDragging:Callback function on Slider value changed.
  • textBackgroundColor:Colors of the container which holds the text.