SliderSlider

スライダーコンポーネントは、ユーザーがスライダーをスライドさせて一連の値から選択できるようにします。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/slider.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Slider } from 'mdui/components/slider.js';

使用例：

<mdui-slider></mdui-slider>

例

デフォルト値

value 属性を使用して、スライダーの現在の値を読み取りまたは設定できます。

<mdui-slider value="50"></mdui-slider>

Fuente

無効状態

disabled 属性を追加すると、スライダーを無効にできます。

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

Fuente

範囲

min と max 属性を使用して、スライダーの最小値と最大値を設定します。

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

Fuente

ステップ間隔

step 属性を使用して、スライダーのステップ間隔を設定できます。

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

Fuente

目盛りマーク

tickmarks 属性を追加すると、スライダーに目盛りマークを表示できます。

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

Fuente

テキストヒントを非表示

スライダー上のテキストヒントを非表示にしたい場合は、nolabel 属性を追加します。

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

Fuente

テキストヒントを変更

labelFormatter JavaScript プロパティを使用して、テキストヒントの表示形式を変更できます。このプロパティの値は関数で、その関数は現在のスライダーの値を受け取り、表示したいテキストを返します。

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

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

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`value`	`value`	`number`	`0`
スライダーの値です。フォームデータと共に送信されます。
	`defaultValue`	`number`	`0`
デフォルト値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性は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`	-
ラベルの表示形式をカスタマイズするための関数です。関数の引数はスライダーの現在の値で、戻り値は表示するテキストです。

Métodos

Nombre	Parámetros	Valor de retorno
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (Opcional)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。

Eventos

Nombre
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`change`
値が変更され、フォーカスを失ったときに、このイベントが発生します。
`input`
値が変更されたときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。

CSS Parts

Nombre
`track-inactive`
非アクティブ状態のトラック
`track-active`
アクティブ状態のトラック
`handle`
操作レバー
`label`
ヒントテキスト
`tickmark`
目盛り

Capítulo anterior

SegmentedButton Botón segmentado

Capítulo siguiente

Snackbar Snackbar