RangeSlider범위 슬라이더

범위 슬라이더 컴포넌트는 사용자가 일련의 값 중에서 범위를 선택할 수 있도록 합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/range-slider.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { RangeSlider } from 'mdui/components/range-slider.js';

사용 예시:

<mdui-range-slider></mdui-range-slider>

예시

기본값

value 속성으로 범위 슬라이더의 현재 값을 읽거나 설정할 수 있습니다. 이 속성값은 배열이며, JavaScript 속성으로서만 읽고 설정할 수 있습니다.

<mdui-range-slider class="example-value"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-value");
  slider.value = [30, 70];
</script>

소스

비활성화 상태

disabled 속성을 추가하면 범위 슬라이더를 비활성화할 수 있습니다.

<mdui-range-slider disabled></mdui-range-slider>

소스

범위

min 및 max 속성을 사용해 범위 슬라이더의 최소값과 최대값을 설정합니다.

<mdui-range-slider min="10" max="20"></mdui-range-slider>

소스

단계 간격

step 속성을 사용해 범위 슬라이더의 단계 간격을 설정합니다.

<mdui-range-slider step="10"></mdui-range-slider>

소스

눈금 표시

tickmarks 속성을 추가하면 범위 슬라이더에 눈금을 표시할 수 있습니다.

<mdui-range-slider tickmarks step="10"></mdui-range-slider>

소스

텍스트 힌트 숨기기

nolabel 속성을 추가하면 범위 슬라이더의 텍스트 힌트를 숨길 수 있습니다.

<mdui-range-slider nolabel></mdui-range-slider>

소스

텍스트 힌트 수정

labelFormatter JavaScript 속성으로 텍스트 힌트의 표시 형식을 수정할 수 있습니다. 이 속성값은 함수이며, 함수의 매개변수는 현재 범위 슬라이더의 값이고, 반환값은 표시하려는 텍스트입니다.

<mdui-range-slider class="example-label-formatter"></mdui-range-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} 시간`;
</script>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
	`defaultValue`	`number[]`	`[]`
기본값입니다. 폼을 재설정할 때 이 기본값으로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
	`value`	`number[]`	-
슬라이더의 값으로, 배열 형식이며 폼 데이터와 함께 제출됩니다. 참고: 이 프로퍼티는 HTML 속성으로 초기값을 설정할 수 없습니다. 이 값을 수정하려면 JavaScript 프로퍼티 값을 통해서만 가능합니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
`min`	`min`	`number`	`0`
슬라이더의 최솟값입니다. 기본값은 `0`입니다.
`max`	`max`	`number`	`100`
슬라이더의 최댓값입니다. 기본값은 `100`입니다.
`step`	`step`	`number`	`1`
증분 간격입니다. 기본값은 `1`입니다.
`tickmarks`	`tickmarks`	`boolean`	`false`
눈금 표시를 추가할지 여부를 지정합니다.
`nolabel`	`nolabel`	`boolean`	`false`
텍스트 힌트를 숨길지 여부를 지정합니다.
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
`name`	`name`	`string`	`''`
슬라이더의 이름이며, 폼 데이터와 함께 제출됩니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
	`labelFormatter`	`(value: number) => string`	-
레이블의 표시 형식을 사용자 정의하는 함수입니다. 함수의 인자는 슬라이더의 현재 값이며, 반환값은 표시할 텍스트입니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`change`
값이 변경되고 포커스를 잃으면 발생합니다.
`input`
값이 변경될 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

CSS Parts

이름
`track-inactive`
비활성 상태 트랙
`track-active`
활성 상태 트랙
`handle`
핸들
`label`
힌트 텍스트
`tickmark`
눈금 표시

이전 장

Radio 라디오

다음 장

Select 셀렉트