如何在滑块选择器上添加标签

Question

如何获得一个小标签，告诉我在 python 的 Dash 滑块上选择的数字？我正在使用 dash_core_components.Slider().

我基本上想要在第一个滑块 here 上显示带有小蓝色“500”标签的东西 here。

Answer 1

给出的第一个示例 here 显示了如何根据滑块的值更新标签。我在下面的代码中对其进行了一些修改，以根据需要使用 Slider（而不是 RangeSlider），并在拖动时更新标签（而不是在鼠标弹起时）：

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)

不幸的是，这并没有按照您的意愿将标签作为小旗帜放置在滑块上方。对此没有简单的解决方案，但您可以使用 JavaScript 使标签 div 跟随滑块句柄，并在页面加载时执行它。

您可以 add your own CSS and JavaScript to dash apps，因此请添加以下代码段：

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);

注意使用 setTimeout 的变通方法 - 理想情况下，如果有这样的事件要附加到滑块，您希望 appendToSlider 函数在滑块呈现后立即执行。我找不到解决方法，但这是一个单独线程的问题。

Answer 2

关于此问题的更新：always-visible 工具提示（即值标签）对于 dcc.Slider() 是 now available，从 Dash 1.0 开始是 dcc.RangeSlider()，参数是 tooltip:

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

您可以使用

安装 Dash >=1.0

pip install dash

Dash 的最新版本是 1.9.1

如何在滑块选择器上添加标签

How to add a label over slider selector

plotly-dash