브랜드 일관성 범위 슬라이더

웹 기능: accent-color <input type="range"> appearance progress() attr() :dir()

기본 범위 입력 사용

<div> 요소 또는 맞춤 포인터 핸들러를 사용하여 슬라이더를 다시 만드는 대신 라벨이 지정된 <input type="range">를 사용합니다. 네이티브 컨트롤은 키보드 및 포인터 상호작용, 터치 동작, 접근성 지원을 유지합니다. 사용 사례에 맞게 min, max, step, value를 구성합니다.

<label for="range-slider">Volume</label>
<input type="range" id="range-slider" value="70"/>

값에 형식이 지정된 라벨이나 단위가 필요한 경우 일반 DOM 콘텐츠에 노출하고 변경 시 aria-valuetext를 업데이트합니다. 양식 컨트롤에서 생성된 콘텐츠는 상호 운용이 불가능하므로 슬라이더 가상 요소에 ::before 또는 ::after를 사용하지 마세요. 엄지손가락을 따라가는 도움말이 필요한 경우 CSS 앵커 위치 지정을 사용하여 엄지손가락에 고정합니다. 뒤집을 때 올바른 방향을 유지하는 도움말은 위치 인식 도움말을 참고하세요.

스타일 지정 방식 선택

간단한 색상 맞춤설정을 하려면 브랜드 일관성 양식을 사용하고 브라우저의 기본 렌더링을 유지하세요.

input[type="range"] {
  accent-color: var(--brand-color);
}

accent-color는 완전한 슬라이더 스타일 지정 API가 아닙니다. 엄지손가락, 트랙, 채우기에 미치는 영향은 사용자 에이전트에 따라 다릅니다. 트랙, 엄지손가락, 크기, 모양 또는 채우기를 제어해야 하는 경우 아래의 의사 요소를 사용하세요.

트랙 및 엄지손가락 스타일 지정

appearance: none, margin: 0, border: 0를 사용하여 기본 OS 스타일을 재설정합니다. 브라우저 간 렌더링을 정규화하려면 별도의 규칙 블록에서 WebKit 및 Firefox 의사 요소를 선언하고 margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2)를 사용하여 WebKit 엄지손가락을 중앙에 배치합니다(Firefox는 엄지손가락을 자동으로 중앙에 배치함). 테마가 가상 요소를 직접 타겟팅하지 않도록 소비자 대상 값을 입력의 맞춤 속성으로 유지합니다.

input[type="range"] {
  --slider-track-size: 0.5rem;
  --slider-thumb-size: 1.25rem;
  --slider-track-radius: 999px;
  --slider-thumb-radius: 50%;
  --slider-track-color: #d9d9d9;
  --slider-fill-color: #06c;
  --slider-thumb-color: var(--slider-fill-color);
  --slider-direction: to right;

  /* reverse gradient direction for right-to-left layouts */
  &:dir(rtl) {
    --slider-direction: to left;
  }

  /* Read min and max from attributes; --control-value is synced by the script below. */
  --attr-min: attr(min type(<number>), 0);
  --attr-max: attr(max type(<number>), 100);
  --control-value: attr(value type(<number>), 50);
  --slider-progress: calc(
    progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
  );

  appearance: none;
  inline-size: 100%;
  block-size: 2.5rem; /* Preserve a generous interaction area. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

/* WebKit/Blink. */
input[type="range"]::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: linear-gradient(
    var(--slider-direction),
    var(--slider-fill-color) var(--slider-progress),
    var(--slider-track-color) var(--slider-progress)
  );
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  margin-block-start: calc(
    (var(--slider-track-size) - var(--slider-thumb-size)) / 2
  );
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

/* Firefox. */
input[type="range"]::-moz-range-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: var(--slider-track-color);
}

input[type="range"]::-moz-range-progress {
  block-size: var(--slider-track-size);
  border-radius: var(--slider-track-radius);
  background: var(--slider-fill-color);
}

input[type="range"]::-moz-range-thumb {
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

기본 모양을 삭제한 후에는 항상 표시되는 키보드 포커스 표시기를 제공합니다. 색상만 사용하지 않기:

input[type="range"]:focus-visible {
  outline: 2px solid var(--slider-fill-color);
  outline-offset: 4px;
}

활성 트랙 스타일 지정

트랙의 채워진 부분이 채워지지 않은 트랙과 다르게 스타일이 지정되면 Firefox는 ::-moz-range-progress를 통해 이를 노출합니다. WebKit/Blink는 상응하는 의사 요소를 제공하지 않으므로 input 이벤트에서 실시간 입력 값을 --control-value에 동기화합니다.

const slider = document.querySelector('#range-slider');

function syncSliderValue() {
  slider.style.setProperty('--control-value', slider.value);
}

syncSliderValue();
slider.addEventListener('input', syncSliderValue);

제한사항

  • WebKit 및 Firefox 의사 선택자를 쉼표로 구분된 목록 (예: ::-webkit-slider-thumb, ::-moz-range-thumb)으로 결합하지 마세요. 인식할 수 없는 공급업체 의사 요소가 발견되면 브라우저에서 전체 규칙을 삭제합니다.

대체 값

accent-color의 대체 및 브라우저 지원

accent-color 속성은 점진적 개선입니다. 이 속성을 지원하지 않는 브라우저는 이를 무시하고 기본 UI 색상을 사용합니다.

progress() 및 attr()의 대체 및 브라우저 지원

progress()가 지원되지 않는 경우 calc()를 사용하여 --slider-progress를 계산합니다.

@supports not (opacity: progress(1, 0, 100)) {
  input[type="range"] {
    --slider-progress: calc(
      (var(--control-value) - var(--attr-min)) /
      (var(--attr-max) - var(--attr-min)) * 100%
    );
  }
}

입력된 attr()가 지원되지 않는 경우 JavaScript에서 입력의 min 및 max 속성에서 --attr-min 및 --attr-max를 동기화합니다.

function syncSliderValue() {
  slider.style.setProperty('--attr-min', slider.min || 0);
  slider.style.setProperty('--attr-max', slider.max || 100);
  slider.style.setProperty('--control-value', slider.value);
}