Last updated:
0 purchases
range slider flutter
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:
dependencies:
flutter_range_slider:
copied to clipboard
import 'package:range_slider_flutter/range_slider_flutter.dart';
copied to clipboard
How to use it #
call flutter_range_slider's constructor:
basic implementation #
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(() {});
},
),
copied to clipboard
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.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.