clameyes

Gradioでスライダーが作れるSliderコンポーネントの使い方

公開日:
更新日:
gradio
gradio
python
python
プログラミング
プログラミング
目次

Gradio で UI を組んでいて、スライダー（数値を動かして指定するUI部品）の使い方だけを最短で確認したい人向けの記事です。gr.Slider の最小例から、minimum maximum step などのパラメータ指定、gr.Blocks 内での使い方までをまとめます。Gradio 全般の入門は別記事 Gradioでwebアプリを作る基本コンポーネントの使い方まとめ を参照してください。

Sliderコンポーネントとは

スライダーは、つまみを左右に動かして数値を入力するUI部品です。Gradio では gr.Slider という1行で配置できます[1]。

Image from Gyazo
Gradioのスライダー

Gradio はコンポーネントと呼ぶ部品（テキスト入力、ボタン、画像表示など）を組み合わせて web アプリを作るライブラリで、スライダーもその1つです。

シンプルにスライダーを作る

まずは最小構成で動かします。スライダーで数値を選び、「送信」を押すと2乗して返す Web アプリです。

Image from Gyazo
スライダーを使った Web アプリ

import gradio as gr

def square(x):
    return x ** 2

app = gr.Interface(
    fn=square,
    inputs="slider",
    outputs="number",
)
app.launch()

inputs="slider" のショートカット文字列で、デフォルト設定のスライダーが配置されます。range や初期値はデフォルトに従います。

パラメータを指定して細かく制御する

最大値や初期値を指定したい場合は、文字列ではなく gr.Slider() クラスを使います。

Image from Gyazo
パラメータを指定したスライダー

import gradio as gr

def square(x):
    return x ** 2

app = gr.Interface(
    fn=square,
    inputs=gr.Slider(
        minimum=0,
        maximum=10,
        value=5,
        step=1,
        label="2乗する数",
        interactive=True,
    ),
    outputs="number",
)
app.launch()

主要なパラメータは次の通りです。

パラメータ 説明
minimum 最小値
maximum 最大値
value 初期値（ユーザがスライダーを動かす前の値）
step スライドの刻み幅。整数にしたい場合は step=1
label スライダーの上に表示されるラベル
interactive 動かせるかどうか。value を固定で渡したときも True にすると動かせる

Gradio 5 系では追加で precision パラメータがあり、入力値を小数点何桁で丸めるかを指定できます[1:1]。整数で受け取りたいなら precision=0 が便利です。

gr.Blocks 内でスライダーを使う

gr.Interface は1関数1UIの簡易構成ですが、複数のコンポーネントを自由に並べたい場合は gr.Blocks を使います[2]。Slider もそのまま使えます。

import gradio as gr

def square(x):
    return x ** 2

with gr.Blocks() as app:
    s = gr.Slider(minimum=0, maximum=10, value=5, step=1, label="2乗する数")
    out = gr.Number(label="結果")
    btn = gr.Button("計算")
    btn.click(fn=square, inputs=s, outputs=out)

app.launch()

btn.click で「ボタンを押されたらこの関数を呼ぶ」という配線を明示的に書くスタイルです。複雑なレイアウトを組みたいときはこちらが向きます。詳しい解説は GradioのBlocksでwebアプリのレイアウトを自由に組み立てる にあります。

関連コンポーネント・記事

Gradio の他のコンポーネント単独解説は別記事にあります。Slider と組み合わせて使うことが多いものを中心に。

まとめ

gr.Slider は minimum maximum value step の4つを押さえれば実用的に使えます。gr.Interface のショートカット記法でも gr.Blocks 内のクラス指定でも同じように使えるので、UI の組み方に応じて使い分けてください。

参考文献

脚注

  1. Slider - Gradio Docs (2026-05-10 アクセス) ↩︎ ↩︎

  2. The Interface Class - Gradio Guides (2026-05-10 アクセス) ↩︎

gradio
Gradioで最も簡単にチャットボットを作るChatInterfaceの使い方
gradio
GradioのChatbotコンポーネントで簡単にチャットボットを作る
openai
GradioとOpenAIのAPIでChatGPTライクなチャットボットを作る
gradio
GradioアプリにExamplesで入力と出力の例を追加する
gradio
GradioアプリのFlag(フラグする)って何？Flaggingを使う方法
gradio
Gradioで文字列が使用できるTextboxコンポーネントの使い方