## Slider  
Use Slider component to capture user feedback from a range of values.  
Category: Inputs  

### Introduction

### Simple Usage

Use the `value` prop to get the value of the slider.

```python
import dash_mantine_components as dmc
from dash import callback, html, Output, Input

component = html.Div(
    [
        dmc.Slider(
            id="slider-callback",
            value=26,
            marks=[
                {"value": 20, "label": "20%"},
                {"value": 50, "label": "50%"},
                {"value": 80, "label": "80%"},
            ],
            mb=35,
        ),
        dmc.Text(id="slider-output"),
    ]
)


@callback(Output("slider-output", "children"), Input("slider-callback", "value"))
def update_value(value):
    return f"You have selected: {value}"
```
### Range Slider

Note: The `RangeSlider` has a `minRange` prop that defaults to 10. Make sure `minRange` is not greater than the
slider's maximum value, or the slider won't work properly.


```python
import dash_mantine_components as dmc
from dash import callback, html, Output, Input

component = html.Div(
    [
        dmc.RangeSlider(
            id="range-slider-callback",
            value=[26, 50],
            marks=[
                {"value": 20, "label": "20%"},
                {"value": 50, "label": "50%"},
                {"value": 80, "label": "80%"},
            ],
            mb=35,
        ),
        dmc.Text(id="range-slider-output"),
    ]
)


@callback(
    Output("range-slider-output", "children"), Input("range-slider-callback", "value")
)
def update_value(value):
    return f"You have selected: [{value[0]}, {value[1]}]"
```
### minRange

Use `minRange` prop to control minimum range between from and to values in `RangeSlider`. The default value is 10.
The example below shows how to use `minRange` prop to capture decimal values from the user:


```python
import dash_mantine_components as dmc

component = dmc.RangeSlider(
    minRange=0.2, min=0, max=1, step=0.0005, value=[0.1245, 0.5535]
)
```
### Update Mode

By default, slider value is updated once the user has stopped dragging the handle. But it can be changed by changing
the `updatemode` to "drag" instead of "mouseup" (default).

Below is a slider with `updatemode` set to "drag", observe how the output text changes as you drag the slider handle.

```python
import dash_mantine_components as dmc
from dash import callback, html, Output, Input

component = html.Div(
    [
        dmc.Slider(
            id="drag-slider",
            value=26,
            updatemode="drag",
            marks=[
                {"value": 20, "label": "20%"},
                {"value": 50, "label": "50%"},
                {"value": 80, "label": "80%"},
            ],
        ),
        dmc.Space(h=35),
        dmc.Text(id="drag-output"),
    ]
)


@callback(Output("drag-output", "children"), Input("drag-slider", "value"))
def update_value(value):
    return f"You have selected: {value}"
```
### Control label
To change label behavior and appearance, set the following props:


- `label` – set to `None` to disable the label. You can also provide a formatter function (via `{"function": "..."}`) to customize the label text. The function receives the `value` as its argument.
- `labelAlwaysOn` – if `True` – label will always be displayed, by default label is visible only when user is dragging
- `labelTransitionProps` – props passed down to the `Transition` component, can be used to customize label animation


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python
import dash_mantine_components as dmc

component = dmc.Stack([
    dmc.Text("No label", size="sm"),
    dmc.Slider(value=40, label=None),

    dmc.Text("Label formatted with a function", size="sm", mt="xl"),
    dmc.Slider(
        value=40,
        label={"function": "celsiusLabel"}
    ),

    dmc.Text("Label always visible", size="sm", mt="xl"),
    dmc.Slider(value=40, labelAlwaysOn=True),

    dmc.Text("Custom label transition", size="sm", mt="xl"),
    dmc.Slider(
        value=40,
        labelTransitionProps={
            "transition": "skew-down",
            "duration": 150,
            "timingFunction": "linear"
        }
    ),
])
```

```javascript

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.celsiusLabel = (value) => `${value} °C`;
```


### Min, Max, and Step

You can set `min`, `max` and `step` values for `Slider` component. This will work even for negative and decimal values.

```python
import dash_mantine_components as dmc

component = dmc.Slider(min=-10, max=10, step=0.5)
```
The following example uses a function to format the `label`


Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


```python

import dash_mantine_components as dmc

marks = [
    {"value": 0, "label": "xs"},
    {"value": 25, "label": "sm"},
    {"value": 50, "label": "md"},
    {"value": 75, "label": "lg"},
    {"value": 100, "label": "xl"},
]

component = dmc.Container([
    dmc.Text("Decimal step"),
    dmc.Slider(
        value=0,
        min=-10,
        max=10,
        step=0.1,
        label={"function": "formatDecimal"},
        styles={"markLabel": {"display": "none"}},
    ),

    dmc.Text("Step matched with marks", mt="md"),
    dmc.Slider(
        value=50,
        step=25,
        marks=marks,
        label={"function": "labelFromMarks", "options": {"marks": marks}},
        styles={"markLabel": {"display": "none"}},
    ),
], p="xl")
```

```javascript
var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};

dmcfuncs.formatDecimal = function (value) {
  return value.toFixed(1);
};

dmcfuncs.labelFromMarks = function (value, { marks }) {
  const match = marks.find(m => m.value === value);
  return match ? match.label : null;
};
```


### Domain
By default, min and max values define the possible range of values. `domain` prop allows setting the possible range
of values independently of the min and max values:


```python
import dash_mantine_components as dmc

component = dmc.Slider(
    domain=[0, 100],
      min=10,
      max=90,
      value=25,
      marks=[
        { "value": 10, "label": 'min' },
        { "value": 90, "label": 'max' },
      ]
)
```
### pushOnOverlap
`pushOnOverlap` prop controls whether the thumbs should push each other when they overlap. By default, `pushOnOverlap`
is `True`, if you want to disable this behavior, set it to `False`.

Example of `pushOnOverlap=False`:


```python
import dash_mantine_components as dmc

component = dmc.RangeSlider(
    pushOnOverlap=False,
    minRange=20,
    value=[25, 65]
)
```
### Marks

Add any number of marks to the Slider by setting `marks` prop to an array of objects.

```python
marks = [
  { "value": 20 },                          # displays mark on slider track
  { "value": 40, "label": '40%' },          # adds mark label below slider track
]
```

### Restrict selection to marks
Setting `restrictToMarks=True` ensures that users can only select values matching the specific marks defined. This 
feature is especially helpful when you have uneven or non-standard marks and want to ensure users can only pick 
from those specific points.

Note: The `step` prop is ignored when `restrictToMarks=True`.

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Slider(
            restrictToMarks=True,
            value=25,
            marks=[{"value": index * 25} for index in range(5)],
        ),
        dmc.RangeSlider(
            restrictToMarks=True,
            value=[5, 15],
            marks=[
                {"value": 5},
                {"value": 15},
                {"value": 25},
                {"value": 35},
                {"value": 70},
                {"value": 80},
                {"value": 90},
            ],
        ),
    ]
)
```
### Hidden marks

Hidden marks allow you to snap to specific values without displaying them visually on the track. This is useful when
you want to create a "sticky" snapping behavior to certain values that you don't want to show to the user. Use this
feature together with the `restrictToMarks` prop.


```python
from dash import Input, Output, callback
import dash_mantine_components as dmc

marks = [
    {"value": 0, "label": "0%"},
    {"value": 25, "hidden": True},
    {"value": 50, "label": "50%"},
    {"value": 75, "hidden": True},
    {"value": 100, "label": "100%"},
]

component = dmc.Stack(
    [
        dmc.Text(
            id="hidden-marks-slider-value",
            size="sm",
            children="Hidden marks allow you to snap to specific values "
            "without displaying them visually. Current value: 50",
        ),
        dmc.Slider(
            id="hidden-marks-slider",
            value=50,
            min=0,
            max=100,
            step=1,
            restrictToMarks=True,
            marks=marks,
        ),
    ],
)

@callback(
    Output("hidden-marks-slider-value", "children"),
    Input("hidden-marks-slider", "value"),
)
def update_value(value):
    return (
        "Hidden marks allow you to snap to specific values without displaying "
        f"them visually. Current value: {value}"
    )
```
### Disabled

```python
import dash_mantine_components as dmc


component = dmc.Stack(
    [
        dmc.Slider(value=60, disabled=True),
        dmc.RangeSlider(
            mt="xl",
            mb="xl",
            value=[25, 75],
            disabled=True,
            marks=[
                {"value": 0, "label": "xs"},
                {"value": 25, "label": "sm"},
                {"value": 50, "label": "md"},
                {"value": 75, "label": "lg"},
                {"value": 100, "label": "xl"},
            ],
        ),
    ]
)
```
### Thumb size
```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Text("Standard size", size="sm"),
        dmc.Slider(value=40, label=None),
        dmc.Text("Thumb size number", size="sm", mt="xl"),
        dmc.Slider(value=40, thumbSize=50),
    ]
)
```
### Thumb children
```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = [
    dmc.Slider(
        thumbChildren=DashIconify(icon="mdi:heart", width=16),
        color="red",
        label=None,
        value=40,
        thumbSize=26,
        styles={"thumb": {"borderWidth": 2, "padding": 3}},
    ),
    dmc.RangeSlider(
        mt="xl",
        styles={"thumb": {"borderWidth": 2, "padding": 3}},
        color="red",
        label=None,
        value=[20, 60],
        thumbSize=26,
        thumbChildren=[
            DashIconify(icon="mdi:heart", width=16),
            DashIconify(icon="mdi:heart-broken", width=16),
        ],
    ),
]
```
### Scale
You can use the scale prop to represent the value on a different scale.

In the following demo, the value x represents the value 2^x. Increasing x by one increases the represented value by 2 to the power of x.



Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document.


### Start point
Use the `startPointValue` prop to change the origin of the filled bar. When set, the bar extends from the given value
toward the current value – to the left for values below the start point and to the right for values above it. This prop
is ignored when `inverted` is set.  Available in `Slider` component only.


```python
import dash_mantine_components as dmc

component = dmc.Slider(
    startPointValue=0,
    updatemode="drag",
    min=-100,
    max=100,
    value=40,
    marks=[
        {"value": -100, "label": "-100"},
        {"value": -50, "label": "-50"},
        {"value": 0, "label": "0"},
        {"value": 50, "label": "50"},
        {"value": 100, "label": "100"},
    ],
)
```
### Inverted
You can invert the track by setting `inverted=True`:

```python
import dash_mantine_components as dmc

component = dmc.Stack(
    [
        dmc.Slider(inverted=True, value=80),
        dmc.RangeSlider(inverted=True, value=[40, 60], mt="xl"),
    ]
)
```
### Vertical slider

Set `orientation="vertical"` to render the slider vertically. In vertical orientation, the minimum value is at the 
bottom and the maximum value is at the top.


```python
import dash_mantine_components as dmc

marks = [
    {"value": 20, "label": "20%"},
    {"value": 50, "label": "50%"},
    {"value": 80, "label": "80%"},
]

component = dmc.Group(
    [
        dmc.Slider(
            orientation="vertical",
            value=45,
            marks=marks,
        ),
        dmc.RangeSlider(
            orientation="vertical",
            value=[25, 65],
            marks=marks,
        ),
    ],
    gap=60,
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Slider selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root | `.mantine-Slider-root` | Root element |
| label | `.mantine-Slider-label` | Thumb label |
| thumb | `.mantine-Slider-thumb` | Thumb element |
| trackContainer | `.mantine-Slider-trackContainer` | Wraps track element |
| track | `.mantine-Slider-track` | Slider track |
| bar | `.mantine-Slider-bar` | Track filled part |
| markWrapper | `.mantine-Slider-markWrapper` | Contains `mark` and `markLabel` elements |
| mark | `.mantine-Slider-mark` | Mark displayed on track |
| markLabel | `.mantine-Slider-markLabel` | Label of the associated mark, displayed below track |

#### Slider CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root | `--slider-size` | Controls track `height` |
| root | `--slider-color` | Controls filled track, thumb and marks `background` |
| root | `--slider-thumb-size` | Controls thumb `width` and `height` |
| root | `--slider-radius` | Controls `border-radius` of track and thumb |

#### Slider data attributes

| Selector | Attribute | Condition |
|----------|-----------|-----------|
| trackContainer, track, bar, thumb, mark | `data-disabled` | `disabled` prop is set |
| track, bar | `data-inverted` | `inverted` prop is set |
| thumb | `data-dragging` | slider is being dragged |
| mark | `data-filled` | mark position is less or equal slider value |



### Keyword Arguments
#### Slider

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, controls color of
    track and thumb, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Disables slider.

- domain (list of 2 elements: [number, number]; optional):
    Domain of the slider, defines the full range of possible values,
    `[min, max]` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- inverted (boolean; optional):
    Determines whether track value representation should be inverted,
    `False` by default.

- label (a list of or a singular dash component, string or number; optional):
    Function to generate label (See
    https://www.dash-mantine-components.com/functions-as-props) or any
    react node to render instead, set to None to disable label.

- labelAlwaysOn (boolean; optional):
    Determines whether the label should be visible when the slider is
    not being dragged or hovered, `False` by default.

- labelTransitionProps (dict; optional):
    Props passed down to the `Transition` component, `{ transition:
    'fade', duration: 0 }` by default.

    `labelTransitionProps` is a dict with keys:

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- marks (list of dicts; optional):
    Marks displayed on the track. Type: list of dictionaries. Each
    dictionary must contain a `value` (number) specifying the position
    of the mark and can optionally contain a `label` (str or
    component) and `hidden` (boolean) to hide the mark.

    `marks` is a list of dicts with keys:

- max (number; optional):
    Maximum possible value, `100` by default.

- min (number; optional):
    Minimal possible value, `0` by default.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    Hidden input name, use with uncontrolled component.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Slider orientation default 'horizontal'.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- precision (number; optional):
    Number of significant digits after the decimal point.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem, `'xl'` by default.

- restrictToMarks (boolean; optional):
    Determines whether the selection should be only allowed from the
    given marks array, False by default.

- scale (boolean | number | string | dict | list; optional):
    Function to generate scale (See
    https://www.dash-mantine-components.com/functions-as-props) A
    transformation function to change the scale of the slider.

- showLabelOnHover (boolean; optional):
    Determines whether the label should be displayed when the slider
    is hovered, `True` by default.

- size (number; optional):
    Controls size of the track, `'md'` by default.

- startPointValue (number; optional):
    Value at which the filled bar starts. When set, the bar extends
    from this point toward the current value. Ignored when `inverted`
    is set.

- step (number; optional):
    Number by which value will be incremented/decremented with thumb
    drag and arrows, `1` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- thumbChildren (a list of or a singular dash component, string or number; optional):
    Content rendered inside thumb.

- thumbLabel (string; optional):
    Thumb `aria-label`.

- thumbProps (dict; optional):
    Props passed down to thumb element.

- thumbSize (string | number; optional):
    Thumb `width` and `height`, by default value is computed based on
    `size` prop.

- updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'):
    Determines when the component should update its value property. If
    mouseup (the default) then the slider will only trigger its value
    when the user has finished dragging the slider. If drag, then the
    slider will update its value continuously as it is being dragged.

- value (number; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.
#### RangeSlider

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, controls color of
    track and thumb, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Disables slider.

- domain (list of 2 elements: [number, number]; optional):
    Domain of the slider, defines the full range of possible values,
    `[min, max]` by default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- hiddenInputProps (dict; optional):
    Props passed down to the hidden input.

- inverted (boolean; optional):
    Determines whether track values representation should be inverted,
    `False` by default.

- label (a list of or a singular dash component, string or number; optional):
    Function to generate label (See
    https://www.dash-mantine-components.com/functions-as-props) or any
    react node to render instead, set to None to disable label.

- labelAlwaysOn (boolean; optional):
    Determines whether the label should be visible when the slider is
    not being dragged or hovered, `False` by default.

- labelTransitionProps (dict; optional):
    Props passed down to the `Transition` component, `{ transition:
    'fade', duration: 0 }` by default.

    `labelTransitionProps` is a dict with keys:

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- marks (list of dicts; optional):
    Marks displayed on the track. Type: list of dictionaries. Each
    dictionary must contain a `value` (number) specifying the position
    of the mark and can optionally contain a `label` (str or
    component) and `hidden` (boolean) to hide the mark.

    `marks` is a list of dicts with keys:

- max (number; optional):
    Maximum possible value, `100` by default.

- maxRange (number; optional):
    Maximum range interval, `Infinity` by default.

- min (number; optional):
    Minimal possible value, `0` by default.

- minRange (number; optional):
    Minimal range interval, `10` by default.

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    Hidden input name, use with uncontrolled component.

- orientation (a value equal to: 'horizontal', 'vertical'; optional):
    Slider orientation default 'horizontal'.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- precision (number; optional):
    Number of significant digits after the decimal point.

- pushOnOverlap (boolean; optional):
    Determines whether the other thumb should be pushed by the current
    thumb dragging when minRange/maxRange is reached, True by default.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, numbers are converted to rem, `'xl'` by default.

- restrictToMarks (boolean; optional):
    Determines whether the selection should be only allowed from the
    given marks array, False by default.

- scale (boolean | number | string | dict | list; optional):
    Function to generate scale (See
    https://www.dash-mantine-components.com/functions-as-props) A
    transformation function to change the scale of the slider.

- showLabelOnHover (boolean; optional):
    Determines whether the label should be displayed when the slider
    is hovered, `True` by default.

- size (number; optional):
    Controls size of the track, `'md'` by default.

- step (number; optional):
    Number by which value will be incremented/decremented with thumb
    drag and arrows, `1` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- thumbChildren (a list of or a singular dash component, string or number; optional):
    Content rendered inside thumb.

- thumbFromLabel (string; optional):
    First thumb `aria-label`.

- thumbLabel (string; optional):
    `aria-label` for both thumbs (overridden by
    thumbFromLabel/thumbToLabel if provided).

- thumbSize (string | number; optional):
    Thumb `width` and `height`, by default value is computed based on
    `size` prop.

- thumbToLabel (string; optional):
    Second thumb `aria-label`.

- thumbValueText (boolean | number | string | dict | list; optional):
    `aria-valuetext` for both thumbs. When a function is provided, it
    receives the scaled value.

- updatemode (a value equal to: 'mouseup', 'drag'; default 'mouseup'):
    Determines when the component should update its value property. If
    mouseup (the default) then the Rangeslider will only trigger its
    value when the user has finished dragging the Rangeslider. If
    drag, then the Rangeslider will update its value continuously as
    it is being dragged.

- value (list of 2 elements: [number, number]; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.