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

如何获得一个小标签，告诉我在Dash for python的滑块上选择了什么数字？我正在使用dash_core_components.Slider（）

基本上，我希望在第一个滑块上显示蓝色的“500”标签。

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

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

您可以添加以下代码段：

CSS:

JS:

---

请注意使用

setTimeout

的解决方法-理想情况下，如果要将滑块附加到某个事件，则希望在滑块渲染后立即执行

appendToSlider

函数。我找不到解决这个问题的方法，但这是一个单独线程的问题。

关于这个问题的更新：始终可见的工具提示（即值标签）用于

dcc.Slider（）

和

dcc.RangeSlider（）

从Dash 1.0开始，参数为

tooltip

：

导入破折号
将仪表板核心组件作为dcc导入
...
滑块（…，工具提示={'always_visible'：True}）

您可以使用安装Dash>=1.0

pip安装仪表板

---

Dash的最新版本是1.9.1

是的，我很担心：（我想现在我只需要一个用滑块值更新的标签。不过还是要感谢：）@oskaboska，顺便说一句，我设法让标签像滑块上方的一个标志一样，但这需要在加载滑块元素后执行JQuery代码。我在dash中找不到这样做的方法…哦，你觉得你可以分享你的代码吗？我对JQuery不太在行，所以我希望help@oskaboska，请参阅编辑后的答案。如果我的回答对你有帮助，请接受。

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)

#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 */
}

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