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

modularuiwidgetsverdant-lokum-9bd5c2.netlify.app

Sliders

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.