Slider

Slider

MUISlider

A customizable slider widget provided by Modular UI.

Properties

  • height: double? - Height for the slider; default: 5.

  • inactiveColor: Color? - Inactive color for the slider; default: Color(0xffECEFF1).

  • activeColor: Color? - Active color for the slider; default: Colors.black.

  • thumbColor: Color? - Thumb color for the slider; default: Colors.white.

  • onChanged: void Function(double) - Callback when the slider value changes.

  • value: double - Current value of the slider.

  • min: double - Minimum value for the slider; default: 0.

  • max: double - Maximum value for the slider; default: 100.

  • onChangeStart: void Function(double)? - Callback when the slider value starts changing.

  • onChangeEnd: void Function(double)? - Callback when the slider value stops changing.

CustomSliderThumbShape

A custom thumb shape for the slider provided by Modular UI.

Properties

  • thumbRadius: double - Thumb radius for the slider; default: 10.

Methods

getPreferredSize(bool isEnabled, bool isDiscrete)

Gets the preferred size of the thumb shape.

Parameters

  • isEnabled: bool - Whether the slider is enabled.

  • isDiscrete: bool - Whether the slider is discrete.

Returns

  • Size - The preferred size of the thumb shape.

paint(...)

Paints the custom thumb shape on the canvas.

Parameters

  • Various parameters related to the painting process.

Returns

  • void - Paints the custom thumb shape on the canvas.

Example Usage

Slider with different height from default

MUISlider(
            value: value1,
            height: 3,
            min: 0,
            max: 100,
            thumbColor: Colors.white,
            onChanged: (val) {
              setState(() {
                value1 = val;
              });
            },
          ),

Slider with default height and different Color

MUISlider(
            value: value2,
            min: 0,
            max: 100,
            onChanged: (val) {
              setState(() {
                value2 = val;
              });
            },
            activeColor: Colors.red,
          ),

Slider with bigger height

MUISlider(
            value: value3,
            height: 10,
            min: 0,
            max: 100,
            activeColor: Colors.green,
            onChanged: (val) {
              setState(() {
                value3 = val;
              });
            },
          ),

Notes

  • Provides a customizable slider with various properties.

  • Supports custom thumb shape using the CustomSliderThumbShape class.

  • Utilizes the SliderTheme to apply custom styling.

Last updated