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[]`	-
滑桿的值，為陣列格式，將與表單資料一起送出。 NOTE：該屬性無法透過 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 選擇框