머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

슬라이더

mdui의 슬라이더는 HTML5의 <input type="range" /> 입력란을 사용하여 구현되었습니다.

호출 방식

슬라이더 컴포넌트는 페이지 로드가 완료된 후 자동으로 초기화됩니다. 동적으로 생성된 슬라이더의 경우, 초기화를 위해 mdui.mutation()을 호출해야 합니다.

색상

강조색을 사용합니다.

스타일

연속 슬라이더

예시

<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100"/>
</label>

간격이 있는 슬라이더

예시

<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100"/>
</label>

비활성화 상태

연속 슬라이더 또는 간격이 있는 슬라이더의 input 요소에 disabled 속성을 추가하여 슬라이더를 비활성화할 수 있습니다.

연속 슬라이더:

예시

<!-- 기본값은 0 -->
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100" value="0" disabled/>
</label>

<!-- 기본값이 0이 아님 -->
<label class="mdui-slider">
  <input type="range" step="0.1" min="0" max="100" value="50" disabled/>
</label>

간격이 있는 슬라이더:

예시

<!-- 기본값은 0 -->
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100" value="0" disabled/>
</label>

<!-- 기본값이 0이 아님 -->
<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100" value="50" disabled/>
</label>

동적으로 생성된 슬라이더

슬라이더 컴포넌트가 동적으로 생성된 경우, 초기화를 위해 mdui.mutation()을 호출해야 합니다.

슬라이더 값을 동적으로 수정한 경우, 슬라이더 컴포넌트를 다시 초기화하려면 mdui.updateSliders() 메서드를 호출해야 합니다. 이 메서드는 .mdui-slider 클래스를 포함하는 CSS 선택자, DOM 요소 또는 DOM 요소의 배열을 파라미터로 받아 다시 초기화할 슬라이더를 지정할 수 있습니다. 파라미터를 전달하지 않으면 페이지의 모든 슬라이더가 다시 초기화됩니다.

CSS 클래스 목록

클래스 이름	설명
`.mdui-slider`	슬라이더 컴포넌트를 정의합니다.
`.mdui-slider-discrete`	간격이 있는 슬라이더를 정의합니다.

선택 컨트롤