본문으로 건너뛰기

Slider

Slider은(는) 슬라이더로 숫자 또는 숫자 범위를 선택합니다. 이 필드는 Form의 상태, 검증 및 제출 범위에 포함됩니다.

1. 사용 시점​

일반적인 용도:

  • 백분율 및 임계값
  • 예산 또는 가격 범위
  • 정확한 입력보다 상대 위치가 중요한 숫자

2. 추가 및 구성​

  1. Form Section의 Fields 영역에 Slider을(를) 추가합니다.
  2. 백엔드 DTO 속성과 일치하는 안정적이고 고유한 Field Key / Name을 설정합니다.
  3. 아래의 컴포넌트 속성을 구성하고 필요에 따라 Required, Help Text, Full row 또는 조건식을 추가합니다.
  4. Design Preview에서 초기값과 레이아웃을 확인한 다음 Form Validate / Submit으로 전체 데이터 경로를 테스트합니다.

3. 주요 속성​

속성역할
Min Value / Max Value허용되는 개수, 길이 또는 값 범위를 제한합니다.
Initial Value필드의 초기값, 내용 또는 형식을 설정합니다.
Dual Slider Mode이 동작을 켜거나 끕니다.
Initial Min / Max Value필드의 초기값, 내용 또는 형식을 설정합니다.
MarksDesign Preview와 Runtime에서 필드가 표시되는 방식을 제어합니다.
Disable Slider이 동작을 켜거나 끕니다.

Field Key, Required, Help Text, Full row, Visible When 같은 공통 속성은 Form 필드 계약에서 제공합니다. 표에는 Slider에 특히 중요한 설정을 정리했습니다.

4. Form 값과 백엔드 계약​

제출 값: 일반 모드는 숫자, Dual Slider Mode는 [최소값, 최대값]입니다.

65

[20, 80]

예시는 데이터 형태만 보여 줍니다. API는 업무 DTO에 따라 형식, 범위 및 권한을 계속 검증해야 합니다.

5. 검증, 조건 및 인터랙션​

모든 필드에서 Required, Visible When, Disabled When, Required When, Dependencies, Clear When Hidden을 사용할 수 있습니다. 조건식은 사용성을 높이지만 백엔드 검증이나 권한을 대체하지 않습니다.

컴포넌트 기능: setValue를 지원하여 버튼, Step 또는 다른 작업에서 값을 쓸 수 있습니다.

6. 구성 권장 사항​

권장 사항: 최소값, 최대값 및 정밀도를 프런트엔드와 백엔드 모두에서 검증하세요. 시각적 눈금은 제출 검증을 대체하지 않습니다.

레이아웃, 검증, 제출, 초안 및 백엔드 프로토콜은 Form 개요를 참고하세요.