gradient_range_slider library

A custom slider widget that displays a gradient track.

The GradientSlider widget allows you to create a slider with a gradient track. It provides various customization options such as the gradient colors, thumb color, overlay color, inactive track color, and track height.

The value parameter specifies the current value of the slider, which should be between min and max. The onChanged callback is called when the user drags the slider.

The gradientColors parameter is a list of colors used to create the gradient for the selected portion of the track. The overlayColor parameter specifies the color of the overlay that appears when the thumb is pressed. The inactiveTrackColor parameter specifies the color of the unselected portion of the track. The thumbColor parameter specifies the color of the thumb.

The trackHeight parameter specifies the height of the track.

Example usage:

GradientSlider(
  value: 0.5,
  min: 0.0,
  max: 1.0,
  gradientColors: [Colors.red, Colors.blue],
  onChanged: (newValue) {
    // Handle value change
  },
  overlayColor: Colors.blue.withOpacity(0.2),
  inactiveTrackColor: Colors.grey,
  thumbColor: Colors.black,
  trackHeight: 4.0,
)

See also:

  • Slider, which is the base widget for creating sliders.
  • SliderTheme, which provides theming options for sliders.