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` オブジェクトです。詳細は `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 セレクト