Slider는 사용자가 값 범위에서 부동 소수점 값을 선택하도록 합니다. Slider를 사용하면 사운드 볼륨이나 조명 밝기 등의 값을 조정할 수 있습니다. 값을 설정하려면 트랙을 따라 엄지손가락을 드래그하거나 트랙 자체를 클릭합니다. 슬라이더에는 값을 직접 수정할 수 있는 텍스트 입력 필드도 포함될 수 있습니다.
참고: 인스펙터 창에서 요소를 다른 필드에 맞추려면 .unity-base-field__aligned USS 클래스를 적용합니다. 자세한 내용은 BaseField를 참조하십시오.
UI Builder, UXML, C#으로 Slider를 생성할 수 있습니다. 다음 C# 예시에서는 기본값, 하한값, 상한값이 있는 Slider를 생성하고 슬라이더의 방향을 설정합니다.
var slider = new Slider();
slider.value = 0.5f;
slider.lowValue = 0;
slider.highValue = 100;
slider.direction = SliderDirection.Horizontal;
Slider 컨트롤에는 엄지손가락의 양쪽 트랙을 클릭할 때 엄지손가락이 이동하는 정도와 값이 변경되는 정도를 제어하는 페이지 크기 프로퍼티가 있습니다.
페이지 크기 값이 0인 경우 트랙을 클릭하면 엄지손가락이 커서 또는 포인터 위치로 이동하고 그에 따라 값이 업데이트됩니다.
페이지 크기 값이 0보다 큰 경우 트랙을 클릭하면 엄지손가락이 커서 또는 포인터 위치 쪽으로 일정 값만큼 이동합니다. Slider 컨트롤은 페이지 크기를 전체 범위의 백분율로 처리합니다.
예를 들어 총 범위가 200이고 페이지 크기가 20인 경우 페이지 크기 값은 200의 20%인 40이 됩니다. 트랙을 클릭할 때마다 엄지손가락이 움직이고 값이 40만큼 증가하거나 감소합니다.
다음 UXML 예시에서는 Slider를 생성합니다.
[!code-xml[(External/Resources/editor_resources/Assets/Editor Default Resources/UIPackageResources/Snippets/UXML/SliderSnippet.uxml)]
다음 C# 예시에서는 커스터마이즈 가능한 일부 Slider 기능을 보여 줍니다.
[!code-cs[(Modules/UIElementsSamplesEditor/Snippets/SliderSnippet.cs#sample)]
이 예시를 Unity에서 실험해 보려면 Window > UI Toolkit > Samples로 이동합니다.
C# 클래스:Slider
네임스페이스:UnityEngine.UIElements
기본 클래스:BaseSlider_1
이 요소는 다음 속성을 해당 기본 클래스에서 상속합니다.
| Name | 타입 | 설명 |
|---|---|---|
binding-path |
string |
바인드될 타겟 프로퍼티의 경로입니다. |
direction |
UIElements.SliderDirection |
슬라이더의 방향을 포함하는 실제 프로퍼티입니다. |
focusable |
boolean |
요소에 포커스를 맞출 수 있으면 true입니다. |
high-value |
float |
슬라이더가 인코딩하는 최대값입니다. |
inverted |
boolean |
이 슬라이더의 반전 여부를 나타냅니다.반전된 가로 슬라이더의 경우 큰 값이 왼쪽, 작은 값이 오른쪽에 위치합니다. 반전된 세로 슬라이더의 경우 큰 값이 아래쪽, 작은 값이 위쪽에 위치합니다. |
label |
string |
필드 옆에 표시될 레이블을 나타내는 문자열입니다. |
low-value |
float |
슬라이더가 인코딩하는 최소값입니다. |
page-size |
float |
트랙 내부나 슬라이더 화살표를 클릭하는 등 슬라이더를 스크롤하는 동안 계산된 스크롤 오프셋에 적용해야 하는 값을 나타냅니다. |
show-input-field |
boolean |
슬라이더 컨트롤 안에 있는 선택 필드의 표시 여부입니다. 이 프로퍼티를 true로 설정하면 슬라이더 값을 편집할 수 있는 다른 방법을 제공하는 숫자 텍스트 필드가 표시됩니다. |
tabindex |
int |
포커스 링에서 포커스를 맞출 수 있는 항목을 정렬하는 데 사용되는 정수입니다.0보다 크거나 같아야 합니다. |
value |
float |
슬라이더의 실제 값입니다. |
또한 이 요소는 다음 속성을 VisualElement에서 상속합니다.
| Name | 타입 | 설명 |
|---|---|---|
content-container |
string |
자식 요소가 추가되며, 일반적으로 요소 자체와 동일합니다. |
data-source |
Object |
상속된 모든 데이터 소스를 오버라이드하는 이 VisualElement에 데이터 소스를 할당합니다. 이 데이터 소스는 모든 자식에게 상속됩니다. |
data-source-path |
string |
데이터 소스에서 값까지의 경로입니다. |
name |
string |
이 VisualElement의 이름입니다. 이 프로퍼티를 사용하면 특정 요소를 타게팅하는 USS 선택자를 작성할 수 있습니다.요소에 고유한 이름을 부여하는 것이 표준 관행입니다. |
picking-mode |
UIElements.PickingMode |
mouseEvents 또는 IPanel.Pick 쿼리 중에 이 요소를 선택할 수 있는지를 결정합니다. |
style |
string |
이 요소의 스타일 오브젝트에 대한 레퍼런스입니다. USS 파일에서 계산된 데이터 또는 C#에서 이 오브젝트에 작성된 인라인 스타일을 포함합니다. |
tooltip |
string |
사용자가 마우스를 요소 위에 잠시 놓은 후 정보 박스 안에 표시할 텍스트입니다.이는 에디터 UI에서만 지원됩니다. |
usage-hints |
UIElements.UsageHints |
VisualElement에 대한 고수준의 의도된 사용 패턴을 지정하는 힌트 값 조합입니다.이 프로퍼티는 VisualElement가 아직 Panel에 포함되어 있지 않을 때만 설정할 수 있습니다.Panel에 포함되면 이 프로퍼티는 사실상 읽기 전용이 되며, 변경을 시도하면 예외가 발생합니다.적절한 UsageHints를 지정하면 시스템에서 예상하는 사용 패턴에 따라 특정 작업을 처리하거나 가속하는 방법에 대해 더 나은 결정을 내릴 수 있습니다.이러한 힌트는 동작이나 시각적 결과에는 영향을 주지 않으며 패널과 그 안의 요소의 전반적인 성능에만 영향을 줍니다.항상 적절한 UsageHints를 지정하는 것이 좋지만, 일부 UsageHints는 특정 조건(예: 타겟 플랫폼의 하드웨어 제한으로 인해)에서 내부적으로 무시될 수 있다는 점에 유의하십시오. |
view-data-key |
string |
트리 확장 상태, 스크롤 위치, 줌 레벨 등의 데이터 지속성을 확인하는 데 사용됩니다. 이 키는 뷰 데이터 스토어에서 뷰 데이터를 저장 및 로드하는 데 사용됩니다. 이 키를 설정하지 않은 경우 관련 VisualElement에 대해 지속성이 비활성화됩니다. 자세한 내용은 데이터 지속성 확인을 참조하십시오. |
다음 표는 모든 C# 공용 프로퍼티 이름과 관련 USS 선택자의 리스트입니다.
| C# 프로퍼티 | USS 선택자 | 설명 |
|---|---|---|
ussClassName |
.unity-slider |
이 타입 요소의 USS 클래스명입니다. |
labelUssClassName |
.unity-slider__label |
이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
inputUssClassName |
.unity-slider__input |
이 타입의 요소에 있는 입력 요소의 USS 클래스명입니다. |
ussClassName |
.unity-base-slider |
이 타입 요소의 USS 클래스명입니다. |
labelUssClassName |
.unity-base-slider__label |
이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
inputUssClassName |
.unity-base-slider__input |
이 타입의 요소에 있는 입력 요소의 USS 클래스명입니다. |
horizontalVariantUssClassName |
.unity-base-slider--horizontal |
가로로 표시되는 경우 이 타입 요소의 USS 클래스명입니다. |
verticalVariantUssClassName |
.unity-base-slider--vertical |
세로로 표시되는 경우 이 타입 요소의 USS 클래스명입니다. |
dragContainerUssClassName |
.unity-base-slider__drag-container |
이 타입의 요소에 있는 컨테이너 요소의 USS 클래스명입니다. |
trackerUssClassName |
.unity-base-slider__tracker |
이 타입의 요소에 있는 트래커 요소의 USS 클래스명입니다. |
draggerUssClassName |
.unity-base-slider__dragger |
이 타입의 요소에 있는 드래거 요소의 USS 클래스명입니다. |
draggerBorderUssClassName |
.unity-base-slider__dragger-border |
이 타입의 요소에 있는 드래거 테두리 요소의 USS 클래스명입니다. |
ussClassName |
.unity-base-field |
이 타입 요소의 USS 클래스명입니다. |
labelUssClassName |
.unity-base-field__label |
이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
inputUssClassName |
.unity-base-field__input |
이 타입의 요소에 있는 입력 요소의 USS 클래스명입니다. |
noLabelVariantUssClassName |
.unity-base-field--no-label |
레이블이 없는 경우 이 타입 요소의 USS 클래스명입니다. |
labelDraggerVariantUssClassName |
.unity-base-field__label--with-dragger |
연결된 드래거가 있는 경우 이 타입의 요소에 있는 레이블의 USS 클래스명입니다. |
mixedValueLabelUssClassName |
.unity-base-field__label--mixed-value |
혼합된 값을 표시하는 요소의 USS 클래스명입니다. |
alignedFieldUssClassName |
.unity-base-field__aligned |
인스펙터 요소에 정렬된 요소의 USS 클래스명입니다. |
disabledUssClassName |
.unity-disabled |
비활성화된 로컬 요소의 USS 클래스명입니다. |
또한 인스펙터 또는 UI 툴킷 디버거의 매칭 선택자 섹션을 사용하여 해당 계층 구조의 모든 레벨에서 VisualElement 컴포넌트에 영향을 주는 USS 선택자를 확인할 수도 있습니다.