Slider

The Stac Slider allows you to build a Flutter Slider widget using JSON. To know more about the Slider widget in Flutter, refer to the official documentation.

Properties

Property	Type	Description
id	`String`	The id will be used to save the selected value of slider.
sliderType	`StacSliderType`	The type of slider.
value	`double`	The currently selected value for this slider.
secondaryTrackValue	`double`	The secondary track used to draw progress between the thumb and this value, over the inactive track.
onChanged	`StacAction`	Called during a drag when the user is selecting a new value for the slider.
onChangeStart	`StacAction`	Called when the user starts selecting a new value for the slider.
onChangeEnd	`StacAction`	Called when the user is done selecting a new value for the slider.
min	`double`	The minimum value the user can select.
max	`double`	The maximum value the user can select.
divisions	`int`	The number of discrete divisions.
label	`String`	A label to show above the slider when the slider is active
activeColor	`StacColor`	The color to use for the portion of the slider track that is active.
inactiveColor	`StacColor`	The color for the inactive portion of the slider track.
secondaryActiveColor	`StacColor`	The color to use for the portion of the slider track between the thumb and secondaryTrackValue
thumbColor	`StacColor`	The color of the thumb.
overlayColor	`StacColor`	The highlight color that’s typically used to indicate that the slider thumb is focused, hovered, or dragged.
mouseCursor	`StacMouseCursor`	The cursor for a mouse pointer when it enters or is hovering over the widget.
autofocus	`bool`	True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
allowedInteraction	`StacSliderInteraction`	Allowed way for the user to interact with the slider.

Example

Dart
JSON
Preview

StacScaffold(
  appBar: StacAppBar(
    title: StacText(data: 'Stac Slider'),
  ),
  body: StacForm(
    child: StacCenter(
      child: StacSlider(
        id: 'example_slider',
        sliderType: StacSliderType.material,
        value: 20,
        max: 100,
        divisions: 5,
      ),
    ),
  ),
)

{
  "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
      }
    }
  }
}

Layout Widgets

Display Widgets

Interactive Widgets

Data Widgets

Properties

Example

​Properties

​Example

Properties

Example