Sliders for Jupyter Dash dashboard

agile-dash-slider.py

# the sliders
sliders = [
            # put a blank line at the top
            html.Br(),
            # slider 1
            dcc.Slider(
                    # set the scale
                    0, 25,
                    value=12.5,
                    id='indy_over_tools',
                    updatemode='drag',
                    vertical=False,
                    dots=True,
                    # set text labels at the ends instead of marks
                    marks={
                        1: {'label': 'Individuals and Interactions', 
                            'style': {'font-size': 'large'}},
                        25:{'label': 'Processes and Tools', 
                            'style': {'font-size': 'large'}}
                        },        
                    ),
            html.Br(),
            html.Br(),
            # slider 2
            dcc.Slider(
                    0, 25,
                    value=12.5,
                    id='software_over_docs',
                    updatemode='drag',
                    vertical=False,
                    dots=True,
                    marks={
                        0: {'label': 'Delivering working products',
                            'style': {'font-size': 'large'}},
                        25:{'label': 'Delivering documentation',
                            'style': {'font-size': 'large'}},
                    },
                    ),
            html.Br(),
            html.Br(),
            # slider 3
            dcc.Slider(
                    0, 25,
                    value=12.5,
                    id='collab_over_negotiation',
                    updatemode='drag',
                    vertical=False,
                    dots=True,
                    marks={
                        0: {'label':'Customer collaboration',
                            'style': {'font-size': 'large'}},
                        25: {'label':'Contract negotiations',
                            'style': {'font-size': 'large'}},
                    },
                    ),
            html.Br(),
            html.Br(),
            # slider 4
            dcc.Slider(
                    0, 25,
                    value=12.5,
                    id='change_over_plans',
                    updatemode='drag',
                    vertical=False,
                    dots=True,
                    marks={
                        0: {'label':'Responding to change',
                            'style': {'font-size': 'large'}},
                        25: {'label':'Following a plan',
                            'style': {'font-size': 'large'}},
                    },
                    ),
            html.Br(),
            ]