multi_thumb_slider 1.0.0
multi_thumb_slider: ^1.0.0 copied to clipboard
A slider with multiple thumbs. The behavior of the slider is similar to the official Slider widget. The MultiThumbSlider should have at least 3 thumbs. For less thumbs, use Slider or the RangeSlider.
This Flutter package is a customizable slider widget that provides support for more than two thumbs. It provides an easy implementation of a slider with multiple thumbs that represent values in a range from 0 to 1. The slider can be customized with a custom background widget and a custom thumb builder. It is a powerful tool for creating intuitive and interactive user experiences, e.g. if a gradient creator needs to be implemented in a app.
IMPORTANT #
The package only supports sliders with more than 2 thumbs. For 2 or less thumbs the native widgets Slider and RangeSlider should be used.
Features #
Different use cases can be covered by using the package:
Linear Gradient creator | Overdrag moves other thumbs | Overdrag stops at next thumb |
---|---|---|
![]() |
![]() |
![]() |
IMPORTANT #
Using the Overdrag Move behaviour with a large amount of thumbs might impact the performace of your app. Please use this behaviour it with caution.
Usage #
There are two constructors available: MultiThumbSlider
which takes initialSliderValues
as parameter to create the slider with thumbs at specific values. And MultiThumbSlider.distributed
which takes an intger > 2 in the initialThumbAmount
parameter.
Please read the API documentation for detailed information how the different parameters work together and how the MultiThumbSliderController can be used in detail.
Example:
MultiThumbSlider(
initalSliderValues: [0.0, 0.1, 0.2, 0.9, 1.0],
valuesChanged: (List<double> values) {
// Everytime any thumb is dragged a List of all thumb values
// is passed via valuesChanged.
},
// Optional: Overdrag behaviour of the thumbs.
// Defaults to ThumbOverdragBehaviour.stop
overdragBehaviour: ThumbOverdragBehaviour.move,
// Optional: Lock behaviour of the first an last thumb.
// Defaults to ThumbLockBehaviour.stop
lockBehaviour: ThumbLockBehaviour.none,
// Optional: Custom builder function for the thumb
thumbBuilder: (BuildContext context, int index) => Text("$index"),
// Optional: Background widget of the slider.
background: Container(
height: 10,
decoration: BoxDecoration(
color: Colors.red,
),
),
// Optional: Height of the Widget. Defaults to 48.
height: 72,
// Optional: MultiThumbSliderController can be used to control the slider after build. E.g adding/removing thumbs, get current values, move thumb, etc.
controller: MultiThumbSliderController()
),
Bugs or Requests #
If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I hope I find some time to look into it. Pull requests are also welcome.