범위슬라이드 Range slider

범위 슬라이더는 사용자가 연속된 옵션 범위에서 값을 선택할 수 있도록 하는 경우 사용한다. 사용자가 선택한 값은 선택하는 동안 계속 보이도록 표시하여야 한다.

기본

[(value)]로 값(number)을 연결하고 label로 어떤 값을 고르는지 안내합니다. Signal Forms를 쓰면 [formField]로도 연결됩니다. min(기본 0)·max(기본 100)·step(기본 1)으로 범위와 단계를 정하고, valueText에 함수를 주어 값을 글자로 바꿉니다. 바꾼 글자는 핸들 위 말풍선, 트랙 아래 범위 값, 화면낭독기가 읽는 값(aria-valuetext)에 함께 쓰입니다. 단계가 20개 이하이면 트랙에 단계 눈금이 표시됩니다. 끄는 동안에는 값이 계속 바뀌고, 손을 떼어 값을 확정하면 (valueCommit)이 나갑니다.

import { Component, signal } from '@angular/core'
import { KrdsRangeSlider } from '@krds.ui/angular'

@Component({
  selector: 'demo-range-slider-basic',
  imports: [KrdsRangeSlider],
  template: ` <krds-range-slider label="글자 크기" [max]="sizes.length - 1" [valueText]="sizeText" [(value)]="size" /> `
})
export default class RangeSliderBasic {
  readonly sizes = ['작게', '보통', '조금 크게', '크게', '아주 크게']
  readonly size = signal(2)
  readonly sizeText = (value: number) => this.sizes[value]
}

슬라이더 끝에 선택 값

valuePosition="end"를 주면 선택 값을 말풍선 대신 슬라이더 오른쪽 끝에 표시합니다. 손가락으로 끄는 동안에도 값이 가려지지 않습니다.

import { Component, signal } from '@angular/core'
import { KrdsRangeSlider } from '@krds.ui/angular'

@Component({
  selector: 'demo-range-slider-value-end',
  imports: [KrdsRangeSlider],
  template: ` <krds-range-slider label="음량" [step]="10" [valueText]="percent" valuePosition="end" [(value)]="volume" /> `
})
export default class RangeSliderValueEnd {
  readonly volume = signal(50)
  readonly percent = (value: number) => `${value}%`
}

사용 지침

볼륨·밝기·글자 크기처럼 정확한 값보다 상대적인 값이 중요할 때 씁니다. 정확한 수치를 입력해야 하면 텍스트 입력 필드를, 단계가 몇 개뿐이면 라디오 버튼을 씁니다.
단계는 전체 범위의 10~20%로 정합니다. 너무 세밀하면 고르기 어렵습니다.
말풍선은 항상 핸들 위 가운데에 표시되어, 값 글자가 길면 양 끝에서 슬라이더 밖으로 조금 나갈 수 있습니다. 화면 끝에 붙여 쓸 때는 양옆에 여백을 둡니다.
레이블은 생략하지 않습니다. 화면에서 숨겨야 하면 hideLabel을 지정합니다(화면낭독기는 읽음).

접근성

기본 <input type="range">라 핸들을 끌거나 트랙을 눌러 값을 바꾸고, 키보드로는 ←/→(또는 ↓/↑)로 한 단계씩, Home/End로 최솟값/최댓값을 고릅니다.
valueText를 주면 화면낭독기가 숫자 대신 바꾼 글자(예: 조금 크게, 50%)를 읽습니다.
키보드 초점은 핸들 둘레에 표시됩니다.

KrdsRangeSlider

선택자 krds-range-slider

Inputs

이름	타입	기본값	설명
`[(value)]`	`number`	-	값 (없으면 min)
`label` (필수)	`string`	-	레이블
`hideLabel`	`boolean`	`false`	레이블을 화면에서 숨김 (화면낭독기는 읽음)
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`valueText`	`((value: number) => string)`	-	값을 글자로 (예: v => v + 'px')
`valuePosition`	`'handle' \| 'end'`	`'handle'`	선택 값을 보일 자리
`id`	`string`	-	input의 id (없으면 자동 생성)

Outputs

이름	값	설명
`valueCommit`	`number`	값을 확정했을 때 (손을 뗄 때, change는 안쪽 input의 기본 이벤트와 겹쳐 쓰지 않음)

범위슬라이드 Range slider ​

기본 ​

슬라이더 끝에 선택 값 ​

사용 지침 ​

접근성 ​

KrdsRangeSlider ​