Question

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

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

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

有关此问题的更新：从Dash 1.0开始，dcc.Slider()和dcc.RangeSlider()的{{3}}始终带有参数tooltip：始终可见的工具提示（即值标签）：

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

您可以使用以下方式安装Dash> = 1.0

pip install dash

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

2 个答案: