Gradioを使うとGoogle Colabで作成したAIモデルを簡単にWebアプリとして公開できて便利です。Gradioについて知らない方は下記記事をご覧ください。

 <iframe 
 class="hatenablogcard" 
 style="width:100%;height:155px;max-width:680px;" 
 src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/google-colab-web-app-gradio" 
 width="300" 
 height="150" 
 frameborder="0" 
 scrolling="no">
 </iframe> 
 
今回はそんなGradioでスライダーを作る方法についてご紹介します。
<h2 id="%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%81%A8%E3%81%AF" data-line="7" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%81%A8%E3%81%AF" aria-hidden="true"></a> スライダーとは</h2>
<img src="https://i.gyazo.com/174de0b3a53e181605569f6133aca023.png" alt="Image from Gyazo" /> 
Gradioのスライダー
スライダーとは、数値をスライドさせることで変更できるUIです。Gradioでは、入出力にスライダーを指定するだけでスライダーを作成することができます。
Gradioではコンポーネントと呼ばれるUIパーツを組み合わせてwebアプリを作成しますが、スライダーもコンポーネントの一つです。
<h2 id="slider%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8B" data-line="16" class="code-line"><a class="header-anchor-link" href="#slider%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> Sliderコンポーネントでスライダーを作る</h2>
スライダーを作るには下記の2種類の方法があります。
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">シンプルな方法（ショートカット文字列を指定）</li>
<li data-line="21" class="code-line">パラメータを指定する方法（クラスを使用）</li>
</ul>
それぞれの方法について解説します。
<h3 id="%E6%9C%80%E3%82%82%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC" data-line="25" class="code-line"><a class="header-anchor-link" href="#%E6%9C%80%E3%82%82%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC" aria-hidden="true"></a> 最もシンプルなスライダー</h3>
まずはシンプルな方法でスライダーを使った簡単なwebアプリを作成しましょう。今回作るのは、スライダーで値を指定した後に「送信」を押すと、2乗して返すwebアプリです。
<img src="https://i.gyazo.com/a56bad419cd01d43beabf341f5053b42.png" alt="Image from Gyazo" /> 
スライダーを使ったwebアプリ
上記のwebアプリを実装するには下記のようにコードを書きます。
<div class="code-block-container"><pre class="language-python"><code class="language-python code-line" data-line="34">import gradio as gr

# 関数を定義
def square(x):
 return x ** 2

# Webアプリを作成
app = gr.Interface(
 fn=square, 
 inputs="slider", 
 outputs="number",
)
# Webアプリを起動
app.launch()
</code></pre></div>スライダーを作成すると、綺麗にスライダーが表示されます。スライダーのつまみをスライドさせると、数値を変えることができます。
上記のコードでは、何も指定していないスライダーなので、次はパラメータを指定してみます。
<h3 id="%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC" data-line="55" class="code-line"><a class="header-anchor-link" href="#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC" aria-hidden="true"></a> パラメータを指定したスライダー</h3>
パラメータを指定する場合は、"slider"ではなくgr.Slider()を使用します。この引数（パラメータ）を指定することで、スライダーの機能を調整することができます。
今回は最大値、初期値、ラベルを指定した下記のようなスライダーにします。
<img src="https://i.gyazo.com/1462247b427bcc5eb27301d3cf630ee3.png" alt="Image from Gyazo" /> 
パラメータを指定したスライダー
少し分かりにくいかもしれませんが、最大値が10に設定されているので、スライダーの値は5ですがバーが半分まできていると思います。また、左上のxとなっていた部分のラベルを「2乗する数」に指定しています。
実際に上記のアプリを実装したのが下記のコードです。
<div class="code-block-container"><pre class="language-python"><code class="language-python code-line" data-line="68">import gradio as gr

# 関数を定義
def square(x):
 return x ** 2

# Webアプリを作成
app = gr.Interface(
 fn=square,
 inputs=gr.Slider(
 minimum=0, 
 maximum=10, 
 value=5, 
 step=1, 
 label="2乗する数",
 interactive=True,
 ),
 outputs="number",
)
# Webアプリを起動
app.launch()
</code></pre></div><h3 id="%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%AE%E8%AA%AC%E6%98%8E" data-line="92" class="code-line"><a class="header-anchor-link" href="#%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%AE%E8%AA%AC%E6%98%8E" aria-hidden="true"></a> パラメータの説明</h3>
Slider()の各パラメータについて簡単に解説します。
<table data-line="96" class="code-line">
<thead data-line="96" class="code-line">
<tr data-line="96" class="code-line">
<th>パラメータ</th>
<th>説明</th>
</tr>
</thead>
<tbody data-line="98" class="code-line">
<tr data-line="98" class="code-line">
<td>minimum</td>
<td>最小値</td>
</tr>
<tr data-line="99" class="code-line">
<td>maximum</td>
<td>最大値</td>
</tr>
<tr data-line="100" class="code-line">
<td>value</td>
<td>初期値。ユーザがスライダーを動かす前の値です。</td>
</tr>
<tr data-line="101" class="code-line">
<td>step</td>
<td>スライドする値の間隔。floatの場合はデフォルトだと小数点二桁になっているので、整数にしたい場合は、<code>step=1</code>と指定します。</td>
</tr>
<tr data-line="102" class="code-line">
<td>label</td>
<td>スライダーのラベル。何のスライダーかわかりやすくするために書いた方がユーザにとっては親切です。</td>
</tr>
<tr data-line="103" class="code-line">
<td>interactive</td>
<td>スライダーを動かすことができるかどうか。基本的にスライダーは動かすことができますが、valueを指定した場合は動かすことができなくなります。その場合は、<code>interactive</code>をTrueにすることで動かすことができます。</td>
</tr>
</tbody>
</table>
<h2 id="%E5%8F%82%E8%80%83" data-line="105" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul data-line="106" class="code-line">
<li data-line="106" class="code-line"><a href="https://gradio.app/" target="_blank" rel="nofollow noopener noreferrer">Gradio</a></li>
<li data-line="107" class="code-line"><a href="https://gradio.app/docs" target="_blank" rel="nofollow noopener noreferrer">Gradio Docs</a></li>
</ul>

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