Dash㊳(Sliderコンポーネント)

Sliderコンポーネント

Sliderコンポーネントは単一のハンドルをもつスライダーです。

スライダーの設定値は次の通りです。

オプション 内容
min 最小値を設定
max 最大値を設定
step ステップを設定
value 初期値を設定
dots Trueを指定するとスライダーにドットを表示

スライダーを変更すると、その選択値をスライダーの下に表示するアプリケーションを作成します。

[ソースコード]

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
30
31
32
33
34
35
36
37
38
39
40
41
42
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.Br(),
dcc.Slider(
id='slider1',
min=-10, # 最小値
max=100, # 最大値
step=1, # 目盛り
value=50, # 初期値
marks={
-10:{'label':'-10度', 'style':{'color':'red', 'fontSize':10}},
0:{'label':'0', 'style':{'fontSize':10}},
25:{'label':'25度'},
50:{'label':'50度', 'style':{'color':'red', 'fontSize':15}},
75:{'label':'75度'},
100:{'label':'100度', 'style':{'color':'green', 'fontSize':12}},
},
#dots=True
),
html.Br(),
html.Div(id='div1')
],
style={'width':'80%', 'margin':'auto'}
)

# コールバック
@app.callback(
Output('div1', 'children'),
Input('slider1', 'value')
)
def change_img(checklist1):
return '選択しているのは"{}"です'.format(checklist1)

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

目盛りのスタイルは引数 marksに数値をキー、ラベルとスタイル設定した辞書型データを設定しています。(17~24行目)

コールバック関数では、スライダーで選択された値をDivコンポーネントに反映しています。(34~39行目)

[ブラウザで表示]

スライダーを移動すると、その選択値がスライダーの下に表示されることを確認できます。