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

官方文档

工坊订单

请给商品列表加一个价格区间筛选。用两个滑块手柄选最低价和最高价，所选区间要立即显示出来。

rx.slider 是一根拖动手柄、在范围内选数字的滑条。适合音量、亮度、价格区间这类大致位置比精确值更重要的数字。给一个值就是一个手柄，给两个值的列表就是区间滑块。

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]`	初始值（非受控）。两个值就是区间滑块
`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 一个含两个值的列表，就会出现两个手柄。两个值都必须在 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

把 State 的值包成列表交给 value（[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"，它就只占滑条本身的宽度。第三个滑块是 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() 转换。有两个手柄的滑块会以 name[] 这个名字提交两次值，而 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",
)

完成订单

用 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)。两个值的列表就是区间滑块。
处理器总是收到值列表。只有一个时用 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