Dash⑮（コールバック／スライダー）

スライダー

Sliderコンポーネントのハンドル位置に応じて、見出しに表示される値が変化するDashアプリケーションを作成します。

app.callbackデコレータの出力項目に見出しのIDと属性、入力項目にはSliderコンポーネントのIDと属性を設定します。（21～24行目）

コールバック関数はSliderコンポーネントの値を返り値とします。（25～26行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H1(id='head-title'),
        dcc.Slider(
            id='slider1',
            value=0,
            min=0,
            max=10,
            updatemode='drag'
        )
    ]
)

@app.callback(
    Output('head-title', 'children'),
    Input('slider1', 'value'),
)
def update_title(num_value):
    return num_value

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

上記ソースを実行すると、コンソールにURLが表示されるのでブラウザで表示します。

[ブラウザで表示]

スライダーの位置を変えると、見出しの数字が変わるアプリケーションができました。