Slider

손잡이를 움직여 수치나 범위를 직관적으로 조절합니다.

<sy-slider>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

코드 보기

HTML

<sy-slider
  value="40"
  min="0"
  max="100"
  step="5"
  showtooltip="always"
  label="값 조절"
  id="sample"
  style="width:100%"
></sy-slider>

사용 가이드

음량·밝기처럼 대략적인 값을 빠르게 조절할 때 사용합니다. 정확한 숫자를 입력해야 한다면 Input Number가 알맞습니다.

하나의 값

min·max로 범위를, step으로 이동 간격을 정합니다.

두 값 사이의 범위

range를 켜고 rangeValue에 두 값의 배열을 전달해 시작과 끝을 조절합니다.

예제

눈금과 지정값

marks로 눈금을 표시하고 snapToMarks로 지정한 위치에 맞춥니다.

코드 보기

HTML

<sy-slider
  value="25"
  snaptomarks
  showtooltip="always"
  label="온도"
  id="sample"
></sy-slider>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "marks": {
      "0": "낮음",
      "25": "보통",
      "50": "높음",
      "100": "최대"
    }
  });
</script>

범위 선택

두 손잡이를 각각 움직여 시작과 끝을 정합니다.

코드 보기

HTML

<sy-slider
  range
  showtooltip="always"
  label="가격 범위"
  id="sample"
></sy-slider>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">범위 읽기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "rangeValue": [
      20,
      80
    ]
  });
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.getValue();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

세로 방향

부모와 컴포넌트에 충분한 높이를 확보하세요.

코드 보기

HTML

<sy-slider
  vertical
  value="60"
  label="음량"
  showtooltip="always"
  tooltipplacement="right"
  style="height:160px"
></sy-slider>

비활성화

값을 보여주면서 조작을 제한합니다.

코드 보기

HTML

<sy-slider
  value="40"
  disabled
  label="잠긴 값"
></sy-slider>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-slider
  value="40"
  min="0"
  max="100"
  step="5"
  showtooltip="always"
  label="값 조절"
  id="sample"
  style="width:100%"
></sy-slider>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

눈금과 채움 표시

hideMarks는 눈금 문구를 숨기고 hideTrackFill은 선택 구간의 색 채움을 숨깁니다. 드래그와 키보드 값 조절은 유지됩니다.

코드 보기

HTML

<sy-slider
  value="40"
  min="0"
  max="100"
  step="5"
  showtooltip="always"
  hidemarks
  hidetrackfill
  label="값 조절"
  id="sample"
  style="width:100%"
></sy-slider>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "hideMarks": true,
    "hideTrackFill": true
  });
</script>

기능별 예제

20개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.