Range Slider

API 문서

Attributes

  • min (number, 기본값: 0): 최소값
  • max (number, 기본값: 100): 최대값
  • step (number, 기본값: 1): 단계값
  • min-value (number | null, 기본값: null): 현재 최소값
  • max-value (number | null, 기본값: null): 현재 최대값
  • disabled (boolean): 비활성화 여부
  • unit (string): 값에 표시할 단위 (예: "cm", "kg")

Methods

  • setMinValue(value: number): 최소값을 설정합니다. 값은 자동으로 범위 내로 제한되고 step에 맞게 스냅됩니다.
  • setMaxValue(value: number): 최대값을 설정합니다. 값은 자동으로 범위 내로 제한되고 step에 맞게 스냅됩니다.
  • focus(): 슬라이더에 포커스를 설정합니다 (min 썸에 포커스).
  • blur(): 슬라이더에서 포커스를 제거합니다.

Setters/Getters

  • min (number): 최소값을 설정하거나 가져옵니다.
  • max (number): 최대값을 설정하거나 가져옵니다.
  • step (number): 단계값을 설정하거나 가져옵니다.
  • minValue (number | null): 최소값을 설정하거나 가져옵니다. setMinValue() 메소드와 동일하게 동작합니다.
  • maxValue (number | null): 최대값을 설정하거나 가져옵니다. setMaxValue() 메소드와 동일하게 동작합니다.
  • disabled (boolean): 비활성화 상태를 설정하거나 가져옵니다.
  • unit (string): 단위를 설정하거나 가져옵니다.

Events

  • rangefocus: 썸이 포커스를 받을 때 발생합니다. detail: { thumb: 'min' | 'max' }
  • rangeblur: 썸이 포커스를 잃을 때 발생합니다. detail: { thumb: 'min' | 'max' }
  • rangechange: 값이 변경되고 커밋될 때 발생합니다. 변경된 값만 포함됩니다. detail: { minValue?: number, maxValue?: number }
  • minchange: min-value가 변경될 때 발생합니다. detail: { value: number }
  • maxchange: max-value가 변경될 때 발생합니다. detail: { value: number }

기본 사용 예시

기본 설정: min=0, max=100, step=1

minValue: 20, maxValue: 80

단위(unit) 속성 사용 예시

unit 속성을 사용하여 값에 단위를 표시할 수 있습니다.

단위: cm (센티미터)

minValue: 150cm, maxValue: 185cm

단위: kg (킬로그램)

minValue: 50kg, maxValue: 80kg

단위 없음 (기본)

minValue: 20, maxValue: 80

다양한 min/max/step 조합

소수점 step (0.1): min=0, max=1, step=0.1

minValue: 0.2, maxValue: 0.8

큰 step (10): min=0, max=1000, step=10

minValue: 200, maxValue: 800

음수 범위: min=-100, max=100, step=5

minValue: -50, maxValue: 50

Disabled 상태

비활성화된 슬라이더는 상호작용할 수 없습니다.

이벤트 리스너 테스트

모든 이벤트(rangefocus, rangeblur, rangechange, minchange, maxchange)를 로그로 확인할 수 있습니다.

이벤트 로그가 여기에 표시됩니다...

인풋 박스 연결 예제

슬라이더와 텍스트 입력 필드를 양방향으로 연결하는 예제입니다. 슬라이더를 조작하면 입력 필드가 업데이트되고, 입력 필드에 값을 입력하면 슬라이더가 업데이트됩니다.

~ cm
이벤트 로그가 여기에 표시됩니다...
// 슬라이더와 인풋 박스 연결 예제 코드

const slider = document.getElementById("slider-input-connected");
const minInput = document.getElementById("input-min-connected");
const maxInput = document.getElementById("input-max-connected");

// minchange 이벤트: min 썸이 움직일 때 최소값 인풋만 업데이트
slider.addEventListener("minchange", (e) => {
  minInput.value = e.detail.value;
});

// maxchange 이벤트: max 썸이 움직일 때 최대값 인풋만 업데이트
slider.addEventListener("maxchange", (e) => {
  maxInput.value = e.detail.value;
});

// rangechange 이벤트: 변경된 값만 포함 (선택적)
slider.addEventListener("rangechange", (e) => {
  if (typeof e.detail.minValue === "number") {
    minInput.value = e.detail.minValue;
  }
  if (typeof e.detail.maxValue === "number") {
    maxInput.value = e.detail.maxValue;
  }
});

// 인풋에서 슬라이더로: 최소값 입력 (포커스를 잃을 때 또는 Enter 키 입력 시 적용)
const applyMinValue = (e) => {
  const value = parseFloat(e.target.value);
  if (!isNaN(value)) {
    slider.setMinValue(value);
  }
};
minInput.addEventListener("blur", applyMinValue);
minInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    applyMinValue(e);
  }
});

// 인풋에서 슬라이더로: 최대값 입력 (포커스를 잃을 때 또는 Enter 키 입력 시 적용)
const applyMaxValue = (e) => {
  const value = parseFloat(e.target.value);
  if (!isNaN(value)) {
    slider.setMaxValue(value);
  }
};
maxInput.addEventListener("blur", applyMaxValue);
maxInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    e.preventDefault();
    applyMaxValue(e);
  }
});

프로그래매틱 값 변경

JavaScript를 통해 값을 변경할 수 있습니다.

minValue: 20, maxValue: 80

키보드 네비게이션 테스트

슬라이더에 포커스한 후 키보드로 조작할 수 있습니다.

minValue: 25, maxValue: 75