MiSlider

The MiSlider component is a Flutter widget for creating interactive sliders that allow users to select a value from a continuous range, configurable via JSON.

Overview

MiSlider extends MiStatelessWidget, serving as a customizable slider component. It allows users to select a value from a specified range by dragging a thumb along a track. The selected value can be linked to a key in the application's state management system, and the slider supports action execution upon value change..

Component Name: slider

JSON key: "component": "slider"

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
value	String	double	The key representing the slider's value in the state. When the slider is moved, the value associated with this key is updated to reflect the new selected value. This key should be formatted as ${key} (e.g., ${volume}). Refer to Key.	0.0	No	Yes
min	num (Number)	double	The minimum value of the slider. The slider's thumb cannot be dragged to a value less than this.	0.0	Yes	No
max	num (Number)	double	The maximum value of the slider. The slider's thumb cannot be dragged to a value greater than this.	100.0	Yes	No
divisions	int	int	The number of discrete divisions the slider has. This determines how many distinct values the slider can select. The slider's thumb will snap to these divisions as it is dragged.	10	Yes	No
color	String	Color	The color of the slider when active. Accepts Flutter color names or hex codes.	Theme default color	Yes	No
width	num (Number)	double	The width of the slider component.	None (Intrinsic width)	Yes	No
height	num (Number)	double	The height of the slider component.	None (Intrinsic height)	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied around the slider. Expects a list of numbers representing padding values (e.g., [left, top, right, bottom]).	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied around the slider. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom]).	None	Yes	No
alignment	String	AlignmentGeometry	How the slider should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', 'bottomRight', etc. Refer to Flutter's Alignment documentation.	Defaults to topLeft	Yes	No

Note:

• Inherited Parameters: The color, alignment, width, height, padding, and margin parameters are inherited from MiStatelessWidget. These parameters provide styling and layout capabilities for the MiSlider component.
• Internal MiSliderState Widget: The MiSlider component uses an internal MiSliderState stateful widget to manage the slider's state and handle user interactions. The parameters like min, max, value, divisions, and valueKey are passed to this internal widget.
• DoubleHelper Class: Helper Class DoubleHelper assists in converting JSON values from num or String, to the correct Flutter types for min and max.
• State Management Integration: The value parameter represents a key in the application's state management system. When the slider is dragged, the value associated with this key is updated to reflect the slider's value.

Example JSON Configurations

Example 1: Basic Slider for Volume Control

{
    "component": "slider",
    "value": "${volume}",
    "min": 0,
    "max": 100,
    "divisions": 10
}

Explanation of Example 1:

• component: "slider" - Identifies this configuration as being for a MiSlider component.
• value: "${volume}" - Sets the slider's state to be linked with the key ${volume}. When dragged, the state of ${volume} will be updated to reflect the slider's new value. Refer to Key.
• min: 0 - Sets the minimum value of the slider to 0.
• max: 100 - Sets the maximum value of the slider to 100.
• divisions: 10 - Divides the slider into 10 discrete steps.

Example 2: Slider for Brightness Control

{
    "component": "slider",
    "value": "${brightness}",
    "min": 0,
    "max": 1,
    "divisions": 100,
    "color": "accent"
}

Explanation of Example 2:

• component: "slider" - Identifies this configuration as being for a MiSlider component.
• value: "${brightness}" - Links the slider's state to the key ${brightness}.
• min: 0 - Sets the minimum value of the slider to 0.
• max: 1 - Sets the maximum value of the slider to 1.
• divisions: 100 - Divides the slider into 100 discrete steps, allowing for finer control over the brightness.
• color: "accent" - Sets the color of the active portion of the slider.