Slider

Slider

값 범위에서 사용자가 선택할 수 있게 해 주는 컴포넌트예요.

출처: 문서

본문

일정 범위의 값 중 하나를 핸들을 드래그해 고르는 슬라이더예요. 볼륨, 배율 같은 숫자 범위를 조절할 때 사용해요.

<Slider defaultValue={[50]} />

이 컴포넌트는 Slider primitive의 props를 상속받으며, 공통 margin props를 지원해요.

예시 (Examples)

Size

size prop으로 크기를 제어할 수 있어요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} size="1" />

  <Slider defaultValue={[50]} size="2" />

  <Slider defaultValue={[75]} size="3" />
</Flex>

Variant

variant prop으로 시각적 스타일을 제어할 수 있어요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} variant="surface" />

  <Slider defaultValue={[50]} variant="classic" />

  <Slider defaultValue={[75]} variant="soft" />
</Flex>

Color

color prop으로 특정 색상을 지정할 수 있어요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[20]} color="indigo" />

  <Slider defaultValue={[40]} color="cyan" />

  <Slider defaultValue={[60]} color="orange" />

  <Slider defaultValue={[80]} color="crimson" />
</Flex>

High-contrast

highContrast prop으로 라이트 모드에서 색 대비를 높일 수 있어요.

<Grid columns="2" gap="4">
  <Slider defaultValue={[10]} color="indigo" />

  <Slider defaultValue={[10]} color="indigo" highContrast />

  <Slider defaultValue={[30]} color="cyan" />

  <Slider defaultValue={[30]} color="cyan" highContrast />

  <Slider defaultValue={[50]} color="orange" />

  <Slider defaultValue={[50]} color="orange" highContrast />

  <Slider defaultValue={[70]} color="crimson" />

  <Slider defaultValue={[70]} color="crimson" highContrast />

  <Slider defaultValue={[90]} color="gray" />

  <Slider defaultValue={[90]} color="gray" highContrast />
</Grid>

Radius

radius prop으로 특정 둥근 모서리 값을 지정할 수 있어요.

<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} radius="none" />

  <Slider defaultValue={[50]} radius="small" />

  <Slider defaultValue={[75]} radius="full" />
</Flex>

Range

값을 여러 개 전달하면 범위 슬라이더를 만들 수 있어요.

<Slider defaultValue={[25, 75]} />

더 알아보기 (Learn more)

• 값을 두 개 제공하면 시작/끝을 모두 조절하는 범위 슬라이더가 돼요.