Add RangeSlider

dash_labs/templates/base.py

@@ -464,6 +464,44 @@ def new_slider(
             location=location,
         )
 
+    @classmethod
+    def new_range_slider(
+            cls,
+            min,
+            max,
+            value=Component.UNDEFINED,
+            step=None,
+            tooltip=None,
+            label=Component.UNDEFINED,
+            kind=Input,
+            location=Component.UNDEFINED,
+            component_property="value",
+            id=None,
+            opts=None,
+    ):
+        if tooltip is None:
+            tooltip = (opts or {}).pop(
+                "tooltip", {"placement": "bottom", "always_visible": True}
+            )
+        elif tooltip is True:
+            tooltip = {"placement": "bottom", "always_visible": True}
+        else:
+            tooltip = None
+
+        if value is Component.UNDEFINED:
+            value = [min, max]
+
+        return kind(
+            dcc.RangeSlider(
+                min=min,
+                max=max,
+                **filter_kwargs(opts, tooltip=tooltip, step=step, value=value, id=id)
+            ),
+            component_property=component_property,
+            label=label,
+            location=location,
+        )
+
     @classmethod
     def new_textbox(
         cls,

docs/demos/06-integration-and-migration/adding_controls2.py

@@ -0,0 +1,62 @@
+import dash
+import dash_labs as dl
+import dash_bootstrap_components as dbc
+import plotly.express as px
+import plotly.graph_objects as go
+
+# Make app and template
+app = dash.Dash(__name__, plugins=[dl.plugins.FlexibleCallbacks()])
+tpl = dl.templates.DbcCard(app, "Gapminder", figure_template=True)
+
+# Load and preprocess dataset
+df = px.data.gapminder()
+years = sorted(df.year.drop_duplicates())
+continents = list(df.continent.drop_duplicates())
+
+
+@app.callback(
+    args=dict(
+        year_range=tpl.new_range_slider(min=years[0], max=years[-1], step=5, label="Year"),
+        continent=tpl.new_checklist(continents, value=continents, label="Continents"),
+        logs=tpl.new_checklist(
+            ["log(x)"],
+            value="log(x)",
+            label="Axis Scale",
+        ),
+    ),
+    output=tpl.new_graph(),
+    template=tpl,
+)
+def callback(year_range, continent, logs):
+    # Let parameterize infer output component
+    # filter years and calculate mean
+    year_df = df[(df.year >= year_range[0]) & (df.year <= year_range[-1])]
+    year_df = year_df.groupby(['country', 'continent']).mean().reset_index()
+    if continent:
+        year_df = year_df[year_df.continent.isin(continent)]
+
+    if not len(year_df):
+        return go.Figure()
+
+    title = f"Mean Life Expectancy ({year_range[0]}-{year_range[-1]})"
+    return (
+        px.scatter(
+            year_df,
+            x="gdpPercap",
+            y="lifeExp",
+            size="pop",
+            color="continent",
+            hover_name="country",
+            log_x="log(x)" in logs,
+            size_max=60,
+            title=title,
+        )
+        .update_layout(margin=dict(l=0, r=0, b=0))
+        .update_traces(marker_opacity=0.8)
+    )
+
+
+app.layout = dbc.Container(fluid=True, children=tpl.children)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)

tests/templates/test_component_builders.py

@@ -63,6 +63,41 @@ def test_slider_builder(test_template):
 
     assert getattr(component, "tooltip", None) is None
 
+def test_range_slider_builder(test_template):
+    min, max, step, val, id = 1, 10, 0.5, [2, 5], "test-rangeslider"
+    component_dep = test_template.new_range_slider(
+        min, max, id=id, value=val, opts=dict(disabled=True)
+    )
+
+    assert isinstance(component_dep, Input)
+    assert component_dep.component_property == "value"
+    component = component_dep.component_id
+
+    assert isinstance(component, dcc.RangeSlider)
+    assert component.id == "test-rangeslider"
+    assert component.min == min
+    assert component.max == max
+    assert component.value == val
+    assert component.disabled is True
+
+    # Template enables persistent tooltips by default
+    assert isinstance(component.tooltip, dict)
+
+    # But can be overridden with tooltip argument, and can override kind to State
+    component_dep = test_template.new_range_slider(
+        min,
+        max,
+        id=id,
+        value=val,
+        kind=State,
+        opts=dict(tooltip=None),
+    )
+
+    assert isinstance(component_dep, State)
+    assert component_dep.component_property == "value"
+    component = component_dep.component_id
+
+    assert getattr(component, "tooltip", None) is None
 
 def test_input_builder(test_template):
     component_dep = test_template.new_textbox(