https://github.com/haptome/flutter_range_slide
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.
https://github.com/haptome/flutter_range_slide
flutter flutterpackage rangeslider
Last synced: 6 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/haptome/flutter_range_slide
- Owner: haptome
- License: mit
- Created: 2022-03-07T09:37:56.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-07T13:02:20.000Z (almost 4 years ago)
- Last Synced: 2024-03-05T10:55:40.500Z (almost 2 years ago)
- Topics: flutter, flutterpackage, rangeslider
- Language: Dart
- Homepage: https://github.com/haptome/flutter_range_slide
- Size: 132 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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:
```
```dart
import 'package:range_slider_flutter/range_slider_flutter.dart';
```
## How to use it
call `flutter_range_slider`'s constructor:
## basic implementation
```dart
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, ie `Min Value`and `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.