スライダー

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`	不連続スライダーを定義します。

選択コントロール

リスト