Py.Cafe

amward/

dcc-sliders-bootstrap-theme

dcc.Sliders with Bootstrap Theme and a theme switch

DocsPricing
  • assets/
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
from dash import Dash, dcc, html, clientside_callback, Input, Output
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.MINTY ])

title = html.H3("dcc.Sliders with a Boostrap theme")

sliders = html.Div(
    [
        dcc.RangeSlider(0, 20, value=[5, 15], className="my-2"),
        dcc.Slider(min=0, max=20, step=5, value=10, className="mb-2"),
        dcc.Slider(
            min=0,
            max=10,
            step=1,
            value=5,
            marks=None,
            tooltip={"placement": "bottom", "always_visible": True},
        ),
    ], 
    # className="dbc"
)

color_mode_switch =  html.Span(
    [
        dbc.Label(className="fa fa-moon", html_for="switch"),
        dbc.Switch( id="switch", value=True, className="d-inline-block ms-1", persistence=True),
        dbc.Label(className="fa fa-sun", html_for="switch"),
    ]
)


app.layout = dbc.Container([title, color_mode_switch, sliders])

clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-bs-theme', switchOn ? 'light' : 'dark');  
       return window.dash_clientside.no_update
    }
    """,
    Output("switch", "id"),
    Input("switch", "value"),
)

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