Dual Input Range Slider

A minimal Dash app showing how to use the DualInputRangeSlider component.

See the Dual Input Range Slider page in the User Guide for the full reference documentation.

Note

Run this file directly to launch the app:

pip install ansys-solutions-dash-super-components
python example_dual_input_range_slider.py

Then open http://localhost:8050 in your browser.

Set up the Dash application

MantineProvider must wrap the entire layout for Mantine-based components to render correctly. The React version must also be set before importing the component library — this is a Dash Mantine Components requirement when using Dash 2.x.

from ansys.solutions.dash_super_components import DualInputRangeSlider
from dash import _dash_renderer
from dash.exceptions import PreventUpdate
from dash_extensions.enrich import DashProxy, Input, Output, callback, html
import dash_mantine_components as dmc

# Required only for Dash 2.x to use Mantine-based components
_dash_renderer._set_react_version("18.2.0")

app = DashProxy(__name__)

Build the layout

Three DualInputRangeSlider instances demonstrate the key configuration options:

• Basic — integer range 0 – 100 with default step and precision.

• Fine-grained — float range −1 to 1 with custom step and decimal scale, plus labelled marks on the slider track.

• Callback demo — the currently selected range is read in a callback() and displayed below the slider.

app.layout = dmc.MantineProvider(
    html.Div(
        [
            dmc.Title("Dual Input Range Slider", order=2, mb="md"),
            dmc.Text(
                "Drag the slider handles or type in the number inputs — they stay in sync.",
                c="dimmed",
                mb="xl",
            ),
            # ── Basic ──────────────────────────────────────────────────────
            dmc.Text("Basic (0 - 100)", fw=600, mb="xs"),
            DualInputRangeSlider(
                aio_id="slider-basic",
                min=0,
                max=100,
                value=[20, 80],
            ),
            dmc.Space(h=32),
            # ── Fine-grained ────────────────────────────────────────────────
            dmc.Text("Fine-grained (-1 to 1, step 0.1)", fw=600, mb="xs"),
            DualInputRangeSlider(
                aio_id="slider-fine",
                min=-1,
                max=1,
                step=0.1,
                decimal_scale=2,
                value=[0.2, 0.8],
                slider_props={
                    "marks": [
                        {"value": -1, "label": "-1"},
                        {"value": 0, "label": "0"},
                        {"value": 1, "label": "1"},
                    ],
                },
            ),
            dmc.Space(h=32),
            # ── Callback demo ───────────────────────────────────────────────
            dmc.Text("Read the selected range in a callback", fw=600, mb="xs"),
            DualInputRangeSlider(
                aio_id="slider-read",
                min=0,
                max=1000,
                step=50,
                value=[200, 600],
            ),
            dmc.Text("Move the slider to see its value here.", id="slider-read-output", mt="sm"),
        ],
        style={"maxWidth": 640, "margin": "40px auto", "padding": "0 16px"},
    )
)

Add a callback

Use DualInputRangeSlider.ids.slider to build the component ID of the underlying RangeSlider sub-component and subscribe to its value property.

@callback(
    Output("slider-read-output", "children"),
    Input(DualInputRangeSlider.ids.slider("slider-read"), "value"),
)
def show_value(value: list[float | int]) -> str:
    """Display the currently selected range."""
    if value is None:
        raise PreventUpdate
    lower, upper = value
    return f"Selected range: {lower} - {upper}"

Run the app

if __name__ == "__main__":
    app.run()