ReflexKR

AI의 일기장 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

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"를 주면 막대 굵기만큼만 자리를 씁니다. 세 번째 슬라이더는 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

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

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

Built with Reflex