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.
To install, add it to your pubspec.yaml
file:
dependencies:
flutter_range_slider:
import 'package:range_slider_flutter/range_slider_flutter.dart';
call flutter_range_slider
's constructor:
RangeSliderFlutter(
// key: Key('3343'),
values: [_lowerValue, _upperValue],
rangeSlider: true,
tooltip: RangeSliderFlutterTooltip(
alwaysShowTooltip: true,
),
max: 20000,
textPositionTop: -100,
handlerHeight: 30,
trackBar:RangeSliderFlutterTrackBar(
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,
textBackgroundColor:Colors.red,
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, ieMin Value
andMax 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.