Slider

Slider (슬라이더)

사용자가 값의 범위에서 선택할 수 있게 해 주는 컴포넌트예요. 볼륨이나 밝기처럼 연속된 값을 조절할 때 아주 유용해요.

출처: 문서

본문

Slider는 단일 값이나 범위 값을 선택하는 데 쓰이는 컴포넌트예요. <ExampleTabs name="slider-basic" />

사용법 (Usage)

import { Slider } from "@chakra-ui/react"

<Slider.Root>
  <Slider.Label />
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb>
      <Slider.DraggingIndicator />
      <Slider.HiddenInput />
    </Slider.Thumb>
    <Slider.MarkerGroup>
      <Slider.Marker />
    </Slider.MarkerGroup>
  </Slider.Control>
</Slider.Root>

Info: 닫힌(closed) 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요.

단축 표현 (Shortcuts)

Slider.Thumbs

이 컴포넌트는 각 값마다 Slider.Thumb와 Slider.HiddenInput 컴포넌트를 렌더링해 줘요.

아래 코드도 동작하지만,

<Slider.Thumb index={0}>
  <Slider.HiddenInput />
</Slider.Thumb>

썸(thumb)을 따로 커스터마이즈할 필요가 없다면 이렇게 쓰는 게 더 좋아요.

<Slider.Thumbs />

Slider.Marks

이 컴포넌트는 각 값마다 Slider.MarkerGroup과 Slider.Marker 컴포넌트를 렌더링해 줘요.

아래 코드도 동작하지만,

<Slider.MarkerGroup>
  <Slider.Marker value={0} />
  <Slider.Marker value={50} />
</Slider.MarkerGroup>

마커를 커스터마이즈할 필요가 없다면 이렇게 쓰는 게 더 좋아요.

<Slider.Marks marks={[0, 50]} />

예시 (Examples)

크기 (Sizes)

size prop으로 슬라이더의 크기를 바꿀 수 있어요.

변형 (Variants)

variant prop으로 슬라이더의 시각적 스타일을 바꿀 수 있어요.

색상 (Colors)

colorPalette prop으로 슬라이더의 색상을 바꿀 수 있어요.

라벨 (Label)

label prop으로 슬라이더에 라벨을 추가할 수 있어요.

범위 슬라이더 (Range Slider)

value나 defaultValue prop에 배열을 넘기면 범위 슬라이더를 만들 수 있어요.

겹침 방지 (Prevent Overlap)

minStepsBetweenThumbs prop을 사용하면 여러 썸이 같은 값을 가지지 않게 해요.

충돌 동작 (Collision Behavior)

thumbCollisionBehavior prop으로 썸이 충돌할 때 어떻게 상호작용할지를 제어해요. 옵션은 "none"(기본값), "push", "swap"이에요.

커스터마이즈 (Customization)

커스텀 아이콘과 배경으로 썸을 꾸미는 예시예요.

값 텍스트 (Value Text)

Slider.ValueText 컴포넌트로 슬라이더의 현재 값을 표시할 수 있어요.

제어 (Controlled)

value와 onValueChange prop으로 슬라이더의 값을 제어할 수 있어요.

스토어 (Store)

슬라이더를 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useSlider 스토어 훅을 사용하는 거예요. 이렇게 하면 슬라이더 바깥에서도 슬라이더의 상태와 메서드에 접근할 수 있어요.

Hook Form

react-hook-form과 슬라이더를 통합하는 예시예요.

비활성화 (Disabled)

disabled prop으로 슬라이더를 비활성화할 수 있어요.

변경 종료 (Change End)

onValueChangeEnd prop으로 슬라이더 변경이 끝나는 시점을 감지할 수 있어요.

단계 (Steps)

step prop으로 슬라이더의 단계 값을 설정할 수 있어요.

썸 정렬 (Thumb Alignment)

thumbAlignment와 thumbSize prop으로 트랙 안에서 썸을 정렬할 수 있어요. 기본적으로 썸은 트랙의 시작 부분에 정렬돼요.

마크 (Marks)

marks prop으로 슬라이더에 마크를 표시할 수 있어요. marks prop에 라벨을 추가하는 것도 가능해요.

커스텀 마커 라벨 (Custom Marker Labels)

Slider.Marker, Slider.MarkerIndicator, Slider.MarkerLabel을 조합하면 각 마커를 독립적으로 커스터마이즈할 수 있어요.

세로 (Vertical)

orientation prop으로 슬라이더의 방향(가로/세로)을 바꿀 수 있어요.

마크가 있는 세로 슬라이더 (Vertical with Marks)

마크가 있는 세로 슬라이더의 예시예요.

드래그 인디케이터 (Dragging Indicator)

Slider.DraggingIndicator 컴포넌트를 렌더링하면 썸을 드래그할 때 인디케이터나 툴팁을 보여줄 수 있어요.

Pro Tip: Slider.DraggingIndicator 안에 Slider.ValueText 컴포넌트를 렌더링하면 현재 값을 보여줄 수 있어요.

닫힌 컴포넌트 (Closed Component)

닫힌 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요. 프로젝트에 자동으로 닫힌 컴포넌트를 추가하고 싶다면 다음 명령을 실행해요.

npx @chakra-ui/cli snippet add slider

Props

Slider 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.

더 알아보기 (Learn more)