## 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( [ # Slider dmc.Slider( restrictToMarks=True, value=25, marks=[{"value": index * 25} for index in range(5)], ), # RangeSlider dmc.RangeSlider( restrictToMarks=True, value=[5, 15], marks=[ {"value": 5}, {"value": 15}, {"value": 25}, {"value": 35}, {"value": 70}, {"value": 80}, {"value": 90}, ], ), ] ) ``` ### 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. ### 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"), ] ) ``` ### Dash 4 Slider and RangeSlider The Dash 4 [`dcc.Slider`](https://dash.plotly.com/dash-core-components/slider) and `dcc.RangeSlider` components supports some features that are not available in DMC, for example integrated numeric input fields and vertical sliders. To style the `dcc.Slider` with a Mantine theme see the [Dash 4 components](/dash4-components) section. ### Styling the Slider The `Slider` component can be fully customized using Mantine's Styles API. Each element of the `Slider` - from the thumb to the track markers - has its own unique selector that can be styled independently. Try the [interactive example](https://mantine.dev/core/slider/#styles-api) in the upstream Mantine documentation to see how these selectors correspond to different parts of the Slider component. Below, you'll find a comprehensive reference of all available selectors, CSS variables, and data attributes. Here is an example: ```python import dash_mantine_components as dmc component = dmc.Slider( value=79, marks=[ {"value": 20, "label": "20%"}, {"value": 50, "label": "50%"}, {"value": 80, "label": "80%"}, ], size=2, classNames={ "track": "dmc-slider-track", "mark": "dmc-slider-mark", "markLabel": "dmc-slider-markLabel", "thumb": "dmc-slider-thumb", }, ) ``` ```css .dmc-slider-track { &::before { background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); } } .dmc-slider-mark { width: 6px; height: 6px; border-radius: 6px; transform: translateX(-3px) translateY(-2px); border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3)); &[data-filled] { border-color: var(--mantine-color-blue-6); } } .dmc-slider-markLabel { font-size: var(--mantine-font-size-sm); color: var(--mantine-color-green-5); margin-bottom: 5px; margin-top: 0; } .dmc-slider-thumb { height: 16px; width: 16px; background-color: var(--mantine-color-green-5); border-width: 1px; box-shadow: var(--mantine-shadow-lg); } ``` ### 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`. - 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. `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. - 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. - 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`. - 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`. - 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. `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. - 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`. - thumbSize (string | number; optional): Thumb `width` and `height`, by default value is computed based on `size` prop. - thumbToLabel (string; optional): Second thumb `aria-label`. - 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`.