Skip to main content

CwSliders Documentation

Overview​

The CwSliders is a versatile slider component library that provides multiple factory constructors for creating different types of slider widgets. It offers extensive customization options for creating single sliders, range sliders, and slider tiles with various styling and interaction capabilities.

Factory Constructors​

1. CwSliders.slider()​

Creates a single-value slider with customizable appearance and behavior.

Parameters​

  • minValue: Minimum value of the slider (default: 0.0)
  • maxValue: Maximum value of the slider (default: 100.0)
  • currentFirstValue: Current value of the slider
  • onChange: Callback function triggered when the slider value changes
  • activeColor: Color of the active portion of the slider track
  • inActiveColor: Color of the inactive portion of the slider track
  • sliderThumb: Custom widget to use as 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
  • valueIndicatorBackGroundColor: Background color of the value indicator
  • valueIndicatorTextStyle: Text style for the value indicator
  • sliderLabelPosition: Position of the labels (default: 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

2. CwSliders.rangeSlider()​

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

Additional Parameters​

  • currentSecondValue: Current value of the second handle
  • valueIndicatorShape: Custom shape for the range slider value indicator
  • thumbShape: Custom shape for the range slider thumbs
  • onChange: Callback function that receives a RangeValues object when the range changes

3. CwSliders.sliderTile()​

Creates a slider embedded within a customizable tile container.

Additional Parameters​

  • slider: The slider widget to display
  • prefix: Widget to display before the slider
  • suffix: Widget to display after the slider
  • title: Widget to display above the slider
  • bottom: Widget to display below the slider
  • tilePadding: Padding around the tile content
  • tileColor: Background color of the tile
  • tileGradient: Gradient background for the tile
  • tileBorder: Border styling for the tile
  • tileBorderRadius: Border radius of the tile

Usage Examples​

1. Basic Single Slider​

CwSliders.slider(
  onChange: (value) => print('Slider value changed: $value'),
  currentFirstValue: 25.0,
  minValue: 0.0,
  maxValue: 100.0,
  activeColor: Colors.blue,
  inActiveColor: Colors.grey,
)

2. Range Slider​

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

3. Slider Tile​

CwSliders.sliderTile(
  slider: Slider(
    value: 50.0,
    onChanged: (value) {},
    min: 0.0,
    max: 100.0,
  ),
  prefix: Icon(Icons.volume_down),
  suffix: Icon(Icons.volume_up),
  title: Text('Volume Control'),
  tileColor: Colors.grey.shade200,
  tileBorderRadius: BorderRadius.circular(12),
)

Customization Options​

The sliders provide extensive customization including:

  • Thumb appearance (size, color, border)
  • Track styling (height, active/inactive colors)
  • Value indicators (visibility, styling, shape)
  • Labels (position, text, styling)
  • Divisions for discrete values
  • Container styling for slider tiles

Source Code Repository​

Find the full source code on GitHub: GitHub Repository