Slider

The Slider component allows users to make selections from a range of values.

---

Python Dash Example

Below is an example of how to use the Slider component in a Python Dash application.

import dash
from dash import html, callback, Output, Input
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.Slider(
        id="basic-slider",
        defaultValue=30,
        valueLabelDisplay="auto"
      ),
      html.Div(id="slider-output")
    ])
  ]
)

@callback(
    Output("slider-output", "children"),
    Input("basic-slider", "value")
)
def update_output(value):
    return f"Selected value: {value}"

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the props for the Slider component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the slider.
value	number | number[]	None	The value of the slider. For range sliders, provide an array [min, max].
defaultValue	number | number[]	None	The default value. Use when the component is not controlled.
disabled	boolean	false	If true, the slider will be disabled.
disableSwap	boolean	false	If true, the sliders may not be moved to a new position by clicking.
min	number	0	The minimum allowed value of the slider.
max	number	100	The maximum allowed value of the slider.
step	number | null	1	The step interval between marks. If null, marks are placed continuously.
marks	boolean | {value: number, label?: ReactNode}[]	false	Displays marks along the slider track.
color	'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'	'primary'	The color of the slider.
size	'small' | 'medium'	'medium'	The size of the slider.
sx	object	None	The system prop that allows defining custom styles.
orientation	'horizontal' | 'vertical'	'horizontal'	The orientation of the slider.
track	'normal' | 'inverted' | false	'normal'	The track presentation of the slider.
valueLabelDisplay	'on' | 'auto' | 'off'	'off'	Controls when the value label is displayed.

---

Range Slider

You can create a range slider by passing an array of values:

dmc.Slider(
  value=[20, 50],
  valueLabelDisplay="auto"
)

---

Discrete Slider with Marks

You can create a slider with discrete values by setting the step and marks props:

dmc.Slider(
  defaultValue=30,
  step=10,
  marks=True,
  min=10,
  max=110,
  valueLabelDisplay="auto"
)

---

Custom Marks

You can define custom marks with specific labels:

marks = [
    {"value": 0, "label": "0°C"},
    {"value": 20, "label": "20°C"},
    {"value": 37, "label": "37°C"},
    {"value": 100, "label": "100°C"},
]

dmc.Slider(
  defaultValue=20,
  step=10,
  marks=marks,
  valueLabelDisplay="auto"
)

---

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Slider Documentation