How to add a label over slider selector

Question

How can I get a little label telling me what number I have selected on a slider in Dash for python? I am using dash_core_components.Slider().

I essentially want to have something with the little blue "500" label shown on the first slider here.

Answer 1

Update on this issue: always-visible tooltips (i.e. value labels) are now available for dcc.Slider() and dcc.RangeSlider() as of Dash 1.0 with the argument tooltip:

import dash
import dash_core_components as dcc
...
    dcc.Slider(..., tooltip = { 'always_visible': True })

You can install Dash >=1.0 with

pip install dash

The latest version of Dash is 1.9.1

Answer 2

The first example given here shows how to update a label according to the value of the slider. I have modified it a bit in the code below to use a Slider as you wanted (instead of RangeSlider), and to update the label while dragging (instead of on mouse-up):

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(id='slider-wrapper', children=[
    dcc.Slider(
        id='my-slider',
        min=0,
        max=20,
        step=0.5,
        value=5,
        updatemode='drag',
    ),
    html.Div(id='output-container-range-slider'),
    # Need onload script: $('#slider-wrapper .rc-slider-handle').appendChild($('#output-container-range-slider'));
])


@app.callback(
    dash.dependencies.Output('output-container-range-slider', 'children'),
    [dash.dependencies.Input('my-slider', 'value')])
def update_output(value):
    return str(value)


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

Unfortunately, this does not place the label as a small flag above the slider as you wanted. There is no simple solution for that, but you could use JavaScript to make the label div follow the slider handle, and execute it on page load.

You can add your own CSS and JavaScript to dash apps, so add the following snippets:

CSS:

#slider-wrapper {
  margin-top: 100px;
}

#output-container-range-slider {
  position: absolute;
  left: -12px;
  top: -40px;
  background-color: #428BCA;
  color: #FFFFFF;
  font-weight: bold;
  height: 35px;
  padding: 5px;
  width: 34px;
  text-align: center;
  display: none;  /* Hide flag until it is moved */
}

JS:

function appendToSlider() {
  var flag = document.getElementById('output-container-range-slider');
  document.querySelector('#slider-wrapper .rc-slider-handle').appendChild(flag);
  flag.style.display = 'block';  // Make visible after moving
}

setTimeout(appendToSlider, 2000);

Notice the workaround using setTimeout - ideally you want the appendToSlider function to get executed right after the slider is rendered, if there was such an event to attach it to. I could not find a way to that, but that is an issue for a separate thread.