lightning:slider

lightning:slider コンポーネントは、指定した 2 つの数字間の値を指定する横方向または縦方向のスライダです。たとえば、このスライダを使用して、注文数量についてのユーザ入力を取得できます。また、type="range" の入力項目を使用する場合にこのスライダを使用できます。スライダの向きを垂直方向にするには、type="vertical" を設定します。スライダをサポートしない古いブラウザではこの設定が無効になり、スライダは type="text" として処理されます。

このコンポーネントは、Lightning Design System のスライダからスタイル設定を継承します。

次に、段階的な増分を 10 に設定したスライダの例を示します。

1<aura:component>
2    <aura:attribute name="myval" default="10" type="Integer"/>
3    <lightning:slider step="10" value="{!v.myval}" onchange="{! c.handleRangeChange }"/>
4</aura:component>

クライアント側のコントローラで値の変更を処理し、値を最新の値で更新します。

1({
2    handleRangeChange: function (cmp, event) {
3        var detail = cmp.set("v.value", event.getParam("value"));
4    }
5})

入力規則

入力の有効性状態を確認するには、checkValidity() メソッドを使用します。これは、ValidityState オブジェクトの valid プロパティ値が true の場合に true を返します。また、setCustomValidity() を使用してカスタムエラーメッセージを提供することもできます (例: setCustomValidity(this.messageWhenRangeUnderflow))。

使用上の考慮事項

デフォルトでは、min 値と max 値は 0 と 100 ですが、独自の値を指定できます。また、独自の段階的な増分値を指定した場合、段階的な増分のみに基づいてスライダをドラッグできます。min 値より低い値を設定した場合、値は min 値に設定されます。同様に、max 値より高い値を設定すると、値は max 値に設定されます。精密な数値の場合は、代わりに type="number" の lightning:input コンポーネントを使用することをお勧めします。

メソッド

このコンポーネントは、次のメソッドをサポートします。

blur(): 入力要素に設定されたキーボードフォーカスを削除します。

checkValidity(): 入力項目値に有効性エラーがあるかどうかを示す、ValidityState オブジェクトの valid プロパティ値 (Boolean) を返します。

focus(): フォーカスを入力要素に設定します。

showHelpMessageIfInvalid(): スライドバーにエラーメッセージを表示します。1 つ以上の制約検証に失敗した場合、スライダ値は無効になり、checkValidity() がコールされると false が返されます。

属性