슬라이더

슬라이더 (Slider)

출처: 문서

본문

고정된 범위 안에서 슬라이더를 드래그해서 값을 선택하는 컴포넌트예요.

기본 사용법 (Basic Usage)

슬라이더를 드래그하는 동안 현재 값이 표시돼요. 바인딩 값을 설정하면 슬라이더의 초기 값을 원하는 대로 바꿀 수 있어요.

• 커스텀한 초기 값 (Customized initial value)
• 툴팁 숨기기 (Hide Tooltip)
• 툴팁 형식 지정 (Format Tooltip)
• 비활성화 (Disabled)

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}

이산 값 (Discrete Values)

선택할 수 있는 값들을 이산적으로 나눌 수 있어요. step 속성으로 스텝 크기를 정하고, show-stops 속성을 설정하면 중간 지점을 표시해줘요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block .demonstration {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
}

입력 상자가 있는 슬라이더 (Slider with Input Box)

입력 상자를 통해 값을 설정할 수 있어요. show-input 속성을 설정하면 오른쪽에 입력 상자가 표시돼요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}

크기 (Sizes)

.slider-demo-block {
  max-width: 600px;
}

.el-slider {
  margin-top: 20px;
}

.el-slider:first-child {
  margin-top: 0;
}

배치 (Placement)

툴팁의 위치를 직접 지정할 수 있어요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}

범위 선택 (Range Selection)

값의 범위를 선택하는 것도 지원해요. range 속성을 설정하면 범위 모드가 활성화되고, 바인딩 값은 두 경계 값으로 구성된 배열이 돼요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}

세로 모드 (Vertical Mode)

vertical 속성을 true로 설정하면 세로 모드가 돼요. 세로 모드에서는 height 속성이 필수예요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}

마크 표시 (Show Marks)

marks 속성을 설정하면 슬라이더 위에 마크를 표시할 수 있어요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}

값 제한 (Restrict Value)

step="mark"로 설정하면 슬라이더 값을 마크로 제한할 수 있어요.

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 12px;
}
.slider-demo-block + .slider-demo-block {
  margin-top: 20px;
}

API

속성 (Attributes)

이벤트 (Events)

타입 선언 (Type Declarations)

type SliderMarks = Record
type Arrayable = T | T[]

더 알아보기 (Learn more)