ReflexKR

Reflex公式ドキュメント

コンポーネント工房：Reflexライブラリ100

講座の概要

レイアウト

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

タイポグラフィ

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

フォーム

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

データ表示

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

開閉と切り替え

Tabs

Accordion

Segmented Control

オーバーレイ

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

動的レンダリング

Cond

Match

Foreach

Auto Scroll

メディア

Image

Audio

Video

表とデータグリッド

Table

Data Table

Data Editor

チャート

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

チャートの部品

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

ほかのチャートライブラリ

Plotly

Pyplot

HTML要素

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

そのほかの道具

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

コンポーネント工房：Reflexライブラリ100

フォーム

Slider

rx.slider

公式ドキュメント

工房の注文書

商品一覧に価格帯のフィルターを付けてください。2つのつまみで最低価格と最高価格を選び、選んだ範囲がすぐに表示されるようにしてください。

rx.sliderはつまみをドラッグして範囲内の数値を選ぶバーです。音量、明るさ、価格帯のように、正確な値よりもおおよその位置が大事な数値に使います。値をひとつ渡せばつまみはひとつ、リストで2つ渡せば範囲スライダーになります。

rx.slider(default_value=40)

プロパティを変えてみる

maxとstepを変えてから、つまみをドラッグしてみてください。step 単位で区切って動きます。

プロパティを変えてみる

max

100

step

size

variant

color

radius

high_contrast

disabled

rx.slider(default_value=40, max=100, step=1, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)

min の既定値は 0、max は 100、step は 1 です。radius は none · small · full だけを受け取ります。

プロパティ	値	既定値	用途
`default_value`	数値 / 数値のリスト	`[50]`	初期値（非制御）。2つなら範囲スライダー
`value`	数値のリスト / Var	なし	制御する値。つまみがひとつでも`[値]`のリスト
`min`, `max`, `step`	数値	`0`, `100`, `1`	範囲と刻み
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	向き
`size`	`"1"` ~ `"3"`	`"2"`	太さ
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	見た目
`color_scheme`, `radius`, `high_contrast`		テーマの値	色、角の丸み（`"none"` `"small"` `"full"`）、コントラスト
`width`	CSS の長さ	`"100%"`	幅
`name`, `disabled`			フォーム送信時の名前、無効化
`on_change`	イベント		ドラッグ中ずっと。値のリストを渡す
`on_value_commit`	イベント		つまみを離したときに一度だけ。値のリストを渡す

離したときに一度だけ：on_value_commit

on_value_commitはつまみを離した瞬間に一度だけ呼ばれます。値はつまみがひとつでも[50]のようにリストで届くので、value[0]で取り出します。ドラッグ中にサーバーを呼ばないので軽量です。

50

class SliderCommitState(rx.State):
    value: int = 50

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value = int(value[0])


rx.vstack(
    rx.heading(SliderCommitState.value, size="5"),
    rx.slider(default_value=50, on_value_commit=SliderCommitState.set_end),
    width="100%",
)

範囲スライダー

default_valueに2つの値のリストを渡すと、つまみが2つになります。どちらの値もmin~maxの範囲内でなければなりません。ハンドラーは[始点, 終点]を受け取ります。

公式ドキュメントの例はmin_=0と書いていますが、0.10 ではmin_は CSS スタイルとして渡されてしまい、スライダーの最小値になりません。最小値はmin=0と書きます。

25

75

class SliderRangeState(rx.State):
    value_start: int = 25
    value_end: int = 75

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value_start = int(value[0])
        self.value_end = int(value[1])


rx.vstack(
    rx.hstack(
        rx.heading(SliderRangeState.value_start, size="5"),
        rx.heading(SliderRangeState.value_end, size="5"),
    ),
    rx.slider(
        default_value=[25, 75],
        min=0,
        max=100,
        size="1",
        on_value_commit=SliderRangeState.set_end,
    ),
    width="100%",
)

ドラッグ中ずっと：on_change + throttle

on_changeはつまみが動いている間ずっと呼ばれます。そのままだとイベントが多すぎるので、.throttle(100)で 100ms に一度だけ送るようにします。

50

class SliderLiveState(rx.State):
    value: int = 50

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value = int(value[0])


rx.vstack(
    rx.heading(SliderLiveState.value, size="5"),
    rx.slider(
        default_value=50,
        min=0,
        max=100,
        on_change=SliderLiveState.set_end.throttle(100),
    ),
    width="100%",
)

制御スライダー：value

valueに State の値をリストで包んで渡すと（[State.volume]）、つまみは常にその値を表示します。このときはon_changeで State を更新しないとつまみが動きません。ボタンが State を変えれば、つまみも移動します。

class SliderControlState(rx.State):
    volume: int = 30

    @rx.event
    def set_volume(self, value: list[int | float]):
        self.volume = int(value[0])

    @rx.event
    def mute(self):
        self.volume = 0


rx.hstack(
    rx.icon("volume-2", size=18),
    rx.slider(
        value=[SliderControlState.volume],
        on_change=SliderControlState.set_volume.throttle(100),
        max=100,
        step=5,
        flex="1",
    ),
    rx.text(SliderControlState.volume, size="2", min_width="2em"),
    rx.button("Mute", on_click=SliderControlState.mute, size="1", variant="soft"),
    width="100%",
    align="center",
)

縦のスライダーと刻み

orientation="vertical"なら縦向きになります。縦のスライダーは親に高さがないと表示されません。既定の幅"100%"の代わりにwidth="auto"を渡すと、バーの太さの分だけ場所を使います。3つ目のスライダーはstep=2なので、0, 2, 4 … 10 にだけ止まります。

rx.hstack(
    rx.slider(default_value=30, orientation="vertical", width="auto"),
    rx.slider(default_value=[20, 60], orientation="vertical", width="auto", color_scheme="green"),
    rx.slider(default_value=4, min=0, max=10, step=2, orientation="vertical", width="auto", color_scheme="orange"),
    height="140px",
    spacing="6",
)

フォームで使う

nameがあればフォームデータに名前: 値として入ります。値は文字列（"40"）で届くので、数値として使うならint()で変換します。つまみが2つのスライダーは値がname[]という名前で2回送信されますが、0.10 のフォームデータは dict なので、同じ名前は最後の値だけが残ります。範囲は State で受け取るほうが確実です。

Results:

{}

class SliderFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.slider(default_value=40, name="slider"),
                rx.button("Submit", type="submit"),
                width="100%",
                align="center",
            ),
            on_submit=SliderFormState.handle_submit,
            reset_on_submit=True,
            width="100%",
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SliderFormState.form_data.to_string())),
        width="100%",
    ),
    width="100%",
    max_width="420px",
)

注文書を仕上げる

2つのつまみをvalue=[low, high]で制御し、on_changeを 100ms に間引いて、ドラッグ中も範囲の表示が追従するようにします。step=10なので価格は 10 単位で区切られます。

Price

$20 - $80

$200

class SliderPriceState(rx.State):
    low: int = 20
    high: int = 80

    @rx.event
    def set_price(self, value: list[int | float]):
        self.low, self.high = int(value[0]), int(value[1])


rx.card(
    rx.vstack(
        rx.hstack(
            rx.text("Price", weight="bold"),
            rx.spacer(),
            rx.badge("$", SliderPriceState.low, " - $", SliderPriceState.high, variant="soft"),
            width="100%",
        ),
        rx.slider(
            value=[SliderPriceState.low, SliderPriceState.high],
            on_change=SliderPriceState.set_price.throttle(100),
            min=0,
            max=200,
            step=10,
        ),
        rx.hstack(rx.text("$0", size="1"), rx.spacer(), rx.text("$200", size="1"), width="100%", color_scheme="gray"),
        width="100%",
    ),
    width="100%",
    max_width="360px",
)

工房ノート

rx.slider(default_value=40)。2つのリストなら範囲スライダー。
ハンドラーは常に値のリストを受け取る。ひとつなら value[0]。
離したときに一度なら on_value_commit、ドラッグ中なら on_change + .throttle(100)。
制御は value=[State.x] + on_change。最小値は min=（min_ ではない）。
フォームでは name: "40" のように文字列で届く。

← 前へ

フォーム · Select

フォーム · Form

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex