> For the complete documentation index, see [llms.txt](https://yashs-organization-7.gitbook.io/modular-ui-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yashs-organization-7.gitbook.io/modular-ui-documentation/slider.md).

# 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

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/slider>" %}
Sliders
{% endembed %}

Slider with different height from default

```dart
MUISlider(
            value: value1,
            height: 3,
            min: 0,
            max: 100,
            thumbColor: Colors.white,
            onChanged: (val) {
              setState(() {
                value1 = val;
              });
            },
          ),
```

Slider with default height and different Color

```dart
MUISlider(
            value: value2,
            min: 0,
            max: 100,
            onChanged: (val) {
              setState(() {
                value2 = val;
              });
            },
            activeColor: Colors.red,
          ),
```

Slider with bigger height

```dart
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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://yashs-organization-7.gitbook.io/modular-ui-documentation/slider.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.