Skip to main content

CwRangeSlider Documentation

Overview​

The CwRangeSlider is a flexible and customizable range slider widget that enables users to select a range of values between a specified minimum and maximum. It provides extensive styling and interaction options, allowing for a smooth and visually appealing user experience.

Factory Constructor​

CwRangeSlider()​

Creates a dual-handle range slider for selecting a range of values.

Parameters​

  • minValue: Minimum value of the slider.
  • maxValue: Maximum value of the slider.
  • currentFirstValue: Initial value of the first thumb.
  • currentSecondValue: Initial value of the second thumb.
  • onChange: Callback function that receives a RangeValues object when the range changes.
  • activeColor: Color of the active track.
  • inActiveColor: Color of the inactive track.
  • sliderThumb: Custom widget for the slider thumb.
  • thumbRadius: Radius of the slider thumb.
  • thumbColor: Color of the slider thumb.
  • thumbBorderColor: Border color of the slider thumb.
  • thumbBorderWidth: Border width of the slider thumb.
  • showThumbBorder: Whether to show a border around the thumb (default: false).
  • divisions: Number of discrete divisions for the slider.
  • trackHeight: Height of the slider track.
  • showValueIndicator: Controls when to show the value indicator.
  • valueIndicatorShape: Custom shape for the value indicator.
  • valueIndicatorColor: Background color of the value indicator.
  • valueIndicatorTextStyle: Text style for the value indicator.
  • sliderLabelPosition: Position of the labels (SliderLabelPosition.bottom, SliderLabelPosition.side, or SliderLabelPosition.none).
  • labelMin: Custom text for the minimum value label.
  • labelMax: Custom text for the maximum value label.
  • labelTextStyle: Text style for the min/max labels.

Usage Example​

Basic Range Slider​

CwRangeSlider(
  onChange: (rangeValues) => print('Range values: $rangeValues'),
  currentFirstValue: 20.0,
  currentSecondValue: 80.0,
  minValue: 0.0,
  maxValue: 100.0,
  divisions: 10,
  activeColor: Colors.green,
  sliderLabelPosition: SliderLabelPosition.sides,
  labelMin: "Min",
  labelMax: "Max",
)

Customization Options​

The CwRangeSlider supports a variety of customization options, including:

  • Thumb appearance (size, color, border)
  • Track styling (height, active/inactive colors)
  • Value indicators (visibility, styling, shape)
  • Labels (position, text, styling)
  • Discrete divisions for range selection

Source Code Repository​

Find the full source code on GitHub: GitHub Repository