RangeSlider
RangeSlider(레인지슬라이더) 위젯은 두 개의 손잡이(썸)로 최소값·최대값 범위를 동시에 선택하는 입력 위젯입니다.
가격대·나이대 등, 시작과 끝이 있는 구간을 고를 때 사용합니다.
정의 / 역할
RangeSlider 위젯은 하나의 트랙 위에 두 개의 손잡이를 그려줍니다. 사용자가 손잡이를 드래그하면 시작값과 끝값으로 이뤄진 범위가 정해집니다. 최소·최대 경계, 눈금 분할, 트랙·눈금·손잡이 색상을 설정할 수 있습니다.
- 카테고리: Contents
- 기본 범위:
0 ~ 1
기능
| 기능 | 설명 |
|---|---|
| 범위 선택 | 두 손잡이로 시작값과 끝값을 동시에 지정해 하나의 구간을 고릅니다. |
| 최소·최대 설정 | min·max로 전체 값 범위를 지정합니다. |
| 눈금 분할 | divisions로 이산 단계(눈금)를 나눠 값을 단계적으로 선택합니다. |
| 색·두께 설정 | 트랙 두께(trackHeight)와 선택·미선택 트랙·눈금·손잡이 색상을 조정합니다. |
| 드래그 동작 연결 | 값이 바뀌는 동안·드래그 시작·드래그 종료 각 시점에 동작을 연결합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- RangeSlider 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서
min·max로 값 범위를 설정합니다. - 필요하면
divisions로 눈금 단계를,trackHeight·색상 속성으로 모양을 조정합니다. onChanged·onChangeEnd등에 값이 바뀔 때 실행할 동작(로직·스크립트)을 연결합니다.
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
values | 현재 선택된 범위(시작값·끝값) | 0 ~ 1 | 범위 값(start–end) |
min | 선택 가능한 최소값 | 0 | 숫자 |
max | 선택 가능한 최대값 | 1 | 숫자 |
divisions | 눈금 분할 개수(이산 단계). 지정하면 값이 단계적으로 이동 | 미지정 | 정수(1 이상) |
trackHeight | 트랙 두께 | 미지정 | 숫자 |
activeTrackColor | 선택된 구간 트랙 색 | 미지정 | 색상 |
inactiveTrackColor | 선택되지 않은 구간 트랙 색 | 미지정 | 색상 |
activeTickMarkColor | 선택된 구간 눈금 색 | 미지정 | 색상 |
inactiveTickMarkColor | 선택되지 않은 구간 눈금 색 | 미지정 | 색상 |
thumbColor | 조절 손잡이(썸) 색 | 미지정 | 색상 |
overlayColor | 손잡이 눌림 오버레이 색 | 미지정 | 색상 |
주의 / 팁
팁
values의 시작값·끝값은 min·max 범위 안에 들어가야 합니다. 기본 범위는 0 ~ 1이므로, 다른 스케일을 쓰려면 min·max를 먼저 설정하세요.
노트
divisions를 지정하면 값이 연속이 아니라 눈금 단위로만 이동합니다. 1 이상의 정수만 들어갑니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 RangeSlider (레인지슬라이더) Widget Control 문서에서 확인하세요.