Skip to main content
Stac slider allows you to build the Flutter Slider widget using JSON. To know more about the Slider widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
idStringThe id will be used to save the selected value of slider.
sliderTypeStacSliderTypeThe type of slider.
valueStacSliderTypeThe currently selected value for this slider.
secondaryTrackValuedoubleThe secondary track used to draw progress between the thumb and this value, over the inactive track.
onChangedMap<String, dynamic>Called during a drag when the user is selecting a new value for the slider.
onChangeStartMap<String, dynamic>Called when the user starts selecting a new value for the slider.
onChangeEndMap<String, dynamic>Called when the user is done selecting a new value for the slider.
mindoubleThe minimum value the user can select.
maxdoubleThe maximum value the user can select.
divisionsintThe number of discrete divisions.
labelStringA label to show above the slider when the slider is active
activeColorStringThe color to use for the portion of the slider track that is active.
inactiveColorStringThe color for the inactive portion of the slider track.
secondaryActiveColorStringThe color to use for the portion of the slider track between the thumb and secondaryTrackValue
thumbColorStringThe color of the thumb.
overlayColorStringThe highlight color that’s typically used to indicate that the slider thumb is focused, hovered, or dragged.
mouseCursorStacMouseCursorThe cursor for a mouse pointer when it enters or is hovering over the widget.
autofocusboolTrue if this widget will be selected as the initial focus when no other node in its scope is currently focused.
allowedInteractionSliderInteractionAllowed way for the user to interact with the slider.

​
Example JSON

{
    "type": "scaffold",
    "appBar": {
        "type": "appBar",
        "title": {
            "type": "text",
            "data": "Stac Slider"
        }
    },
    "body": {
        "type": "form",
        "child": {
            "type": "center",
            "child": {
                "id": "example_slider",
                "type": "slider",
                "sliderType": "material",
                "value": 20,
                "max": 100,
                "divisions": 5
            }
        }
    }
}