> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> Documentation for Slider

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const sliderPreviewJson = {
  "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
      }
    }
  }
};
export const sliderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

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](https://api.flutter.dev/flutter/material/Slider-class.html).

## 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

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    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,
          ),
        ),
      ),
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "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
          }
        }
      }
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={sliderPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: sliderPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>