基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

滑桿

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`	定義間續滑桿。

選擇控制項

清單

滑桿