Skip to main content

CwSingleSlider Documentation

Overview​

The CwSingleSlider is a customizable single-value slider that allows users to select a value within a defined range. It supports custom styling, including track height, thumb shape, value indicators, and labels.

CwSingleSlider​

A single-value slider with extensive customization options.

Parameters​

  • minValue: Minimum value of the slider.
  • maxValue: Maximum value of the slider.
  • currentFirstValue: The current selected value of the slider.
  • activeColor: Color of the active track.
  • inActiveColor: Color of the inactive track.
  • showValueIndicator: Determines when to show the value indicator (default: ShowValueIndicator.always).
  • valueIndicatorShape: Shape of the value indicator (default: RectangularSliderValueIndicatorShape).
  • valueIndicatorColor: Color of the value indicator.
  • valueIndicatorTextStyle: Text style of the value indicator.
  • thumbShape: Custom thumb shape for the slider (default: SliderThumbShape).
  • thumbRadius: Radius of the thumb shape.
  • thumbBorderColor: Border color of the thumb.
  • thumbColor: Fill color of the thumb.
  • thumbBorderWidth: Width of the thumb border.
  • showThumbBorder: Whether to display a border around the thumb (default: false).
  • trackHeight: Height of the slider track.
  • sliderLabelPosition: Position of the min/max labels (bottom or side, default: bottom).
  • labelMin: Label for the minimum value.
  • labelMax: Label for the maximum value.
  • labelTextStyle: Text style for the labels.
  • divisions: Number of discrete divisions between minValue and maxValue.
  • onChange: Callback function triggered when the slider value changes.

Methods​

initState​

  • Initializes the SliderNotifier to manage the slider's state.

build​

  • Builds the slider UI, incorporating custom styling and interactive features.

Usage Example​

CwSingleSlider(
  minValue: 0.0,
  maxValue: 100.0,
  currentFirstValue: 50.0,
  activeColor: Colors.blue,
  inActiveColor: Colors.grey,
  thumbRadius: 12.0,
  showThumbBorder: true,
  thumbBorderColor: Colors.white,
  thumbBorderWidth: 2.0,
  valueIndicatorColor: Colors.white,
  onChange: (value) {
    print("Selected Value: \$value");
  },
)

Customization Options​

The CwSingleSlider allows customization of:

  • Thumb size, color, and border properties.
  • Track height and colors.
  • Value indicators and their appearance.
  • Min/max labels and their positions.
  • Number of divisions for discrete steps.

Source Code Repository​

Find the full source code on GitHub: GitHub Repository