こんにちは、JS2IIUです。
Streamlit上で数値範囲を直感的に選択できるスライダーのUI要素について説明していきます。今回もよろしくお願いします。
1. はじめに
Webアプリケーションでユーザーから数値を入力してもらう場面はよくあります。
たとえば「年齢」「価格の上限」「データ数の範囲」など、選択肢が数値の範囲にあるとき、スライダー形式のUIを使うと、入力がとても直感的になります。
PythonでGUIを簡単に作成できるフレームワーク「Streamlit」では、st.sliderを使って数値・日付・時間を選択するスライダーを作成できます。
この記事では、
st.sliderの基本的な使い方- 各種パラメータの設定方法
- スライダーの応用例（グラフとの連動）
をステップバイステップで紹介していきます！
2. st.sliderとは？
st.sliderは、数値や日付・時間の入力を、マウスのドラッグやクリックで直感的に選べるウィジェットです。
使用目的の例：
- ユーザーにある範囲の値を選ばせたいとき
- フィルタリング条件を入力させたいとき
- グラフやチャートの表示範囲を変更したいとき
3. 基本的な使い方
3.1 最もシンプルな例：1つの数値を選択
ステップ 1：Streamlit をインポート
Python
import streamlit as stステップ 2：スライダーを作成
Python
value = st.slider('数値を選んでください', 0, 100)ステップ 3：値を表示
Python
st.write('選択した値:', value)全体コード：
Python
import streamlit as st
value = st.slider('数値を選んでください', 0, 100)
st.write('選択した値:', value)
解説：
'数値を選んでください'：スライダーのラベル0, 100：選択できる範囲（最小値～最大値）
3.2 範囲を選ぶスライダー（タプル）
Python
range_value = st.slider('範囲を選んでください', 0, 100, (25, 75))
st.write('選択した範囲:', range_value)ここでは (25, 75) のように2つの値（範囲）を返します。
4. st.sliderの主なパラメータ
| パラメータ | 説明 |
|---|---|
label | スライダーに表示するラベル |
min_value | スライダーの最小値 |
max_value | スライダーの最大値 |
value | 初期値（単一 or タプル） |
step | 値の刻み幅 |
format | 表示フォーマット（例: "%d 円"） |
key | 複数ウィジェットで重複を避けるための識別子 |
5. いろいろな型のスライダー例
5.1 小数を選ぶスライダー
Python
float_value = st.slider('小数を選んでください', 0.0, 1.0, 0.5, 0.01)
st.write('選択した値:', float_value)0.0から1.0の間を0.01刻みで選択
5.2 日付を選ぶスライダー
Python
import datetime
date = st.slider(
"日付を選んでください",
min_value=datetime.date(2020, 1, 1),
max_value=datetime.date(2025, 12, 31),
value=datetime.date(2023, 4, 21)
)
st.write('選択した日付:', date)datetime.date型の値を使って、カレンダー風に日付を選択できます。
5.3 時間を選ぶスライダー
Python
import datetime
time = st.slider(
"時間を選んでください",
min_value=datetime.time(0, 0),
max_value=datetime.time(23, 59),
value=datetime.time(12, 0)
)
st.write('選択した時間:', time)- 時間帯を直感的に選ぶ UI も簡単に作成できます。
6. 応用例：スライダーでグラフを動的に変える
Streamlitではスライダーを使って、リアルタイムでグラフを更新することも簡単です。
例：スライダーでデータ数を変更してグラフを表示
Python
import streamlit as st
import numpy as np
import pandas as pd
# スライダーでデータ数を選ぶ
data_count = st.slider('データ数を選んでください', 10, 1000, 100)
# データを作成
data = pd.DataFrame({
'x': np.arange(data_count),
'y': np.random.randn(data_count).cumsum()
})
# グラフを表示
st.line_chart(data)解説：
- スライダーで選んだ「データ数」に応じて、
DataFrameを動的に生成 - グラフ（
line_chart）がスライダー操作に合わせて変化
7. まとめ
今回の記事では、Streamlitのst.sliderを使ってスライダーUIを作る方法を紹介しました。
✔️ 本記事のポイント
st.sliderは数値・日付・時間を直感的に選べる便利なウィジェット- 単一の値も、範囲も、日付や時間も扱える
- 他の要素（グラフなど）と連携してインタラクティブなアプリを作成可能
8. 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント