gradient_range_selector library

A custom range slider widget with a gradient track.

The GradientRangeSelector widget allows users to select a range of values within a specified minimum and maximum range. The track of the slider is painted with a gradient, and the thumb and overlay colors can be customized.

The widget requires the following parameters:

  • min: The minimum value of the range.
  • max: The maximum value of the range.
  • values: The current range of selected values.
  • gradientColors: The colors used to create the gradient on the track.
  • overlayColor: The color of the overlay when the thumb is pressed.
  • inactiveTrackColor: The color of the inactive portion of the track.
  • trackHeight: The height of the track (optional, defaults to 4.0).
  • thumbColor: The color of the thumb (optional, defaults to black).
  • onChanged: A callback function that is called when the range of values changes (optional).

Example usage:

GradientRangeSelector(
  min: 0.0,
  max: 100.0,
  values: RangeValues(20.0, 80.0),
  gradientColors: [Colors.red, Colors.blue],
  overlayColor: Colors.blue.withOpacity(0.2),
  inactiveTrackColor: Colors.grey,
  onChanged: (RangeValues newValues) {
    // Handle value changes
  },
)

The GradientRangeSliderTrackShape class is a custom track shape that paints the track with a gradient. It requires the gradientColors parameter to define the colors of the gradient.