Lightning コンポーネント開発者ガイド
jlightning:slider
lightning:slider コンポーネントは、指定した 2 つの数字間の値を指定する横方向または縦方向のスライダです。たとえば、このスライダを使用して、注文数量についてのユーザ入力を取得できます。また、type="range" の入力項目を使用する場合にこのスライダを使用できます。スライダの向きを垂直方向にするには、type="vertical" を設定します。スライダをサポートしない古いブラウザではこの設定が無効になり、スライダは type="text" として処理されます。
このコンポーネントは、Lightning Design System のスライダからスタイル設定を継承します。
次に、段階的な増分を 10 に設定したスライダの例を示します。
クライアント側のコントローラで値の変更を処理し、値を最新の値で更新します。
使用上の考慮事項
デフォルトでは、min 値と max 値は 0 と 100 ですが、独自の値を指定できます。また、独自の段階的な増分値を指定した場合、段階的な増分のみに基づいてスライダをドラッグできます。min 値より低い値を設定した場合、値は min 値に設定されます。同様に、max 値より高い値を設定すると、値は max 値に設定されます。精密な数値の場合は、代わりに type="number" の lightning:input コンポーネントを使用することをお勧めします。
メソッド
このコンポーネントは、次のメソッドをサポートします。
blur(): 入力要素に設定されたキーボードフォーカスを削除します。
checkValidity(): 入力項目値に有効性エラーがあるかどうかを示す、ValidityState オブジェクトの valid プロパティ値 (Boolean) を返します。
focus(): フォーカスを入力要素に設定します。
- message (String): エラーを説明する文字列。メッセージが空の文字列の場合、エラーメッセージはリセットされます。
showHelpMessageIfInvalid(): スライドバーにエラーメッセージを表示します。1 つ以上の制約検証に失敗した場合、スライダ値は無効になり、checkValidity() がコールされると false が返されます。
属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | コンポーネントの基本クラスに加え、外部要素の CSS クラス。 | |
| title | String | マウスポインタが要素に重ねられたときにツールチップテキストを表示します。 | |
| value | Integer | 入力範囲の数値。この値のデフォルトは 0 です。 | |
| onchange | String | スライダ値が変更された場合にトリガされるアクション。新しく選択した値をスライダコンポーネントに戻して、新しい値をスライダにバインドする必要があります。 | |
| min | Integer | 入力範囲の最小値。この値のデフォルトは 0 です。 | |
| max | Integer | 入力範囲の最大値。この値のデフォルトは 100 です。 | |
| step | String | 入力範囲の段階的な増分値。たとえば、段階的な増分値として 0.1、1、10 があります。この値のデフォルトは 1 です。 | |
| size | String | 入力範囲のサイズ値。この値のデフォルトは空であり、これがベースです。x-small、small、medium、large をサポートします。 | |
| type | String | 入力範囲位置の種別。この値のデフォルトは horizontal です。 | |
| label | String | 入力範囲のテキスト表示ラベル。スライダを説明する独自の表示ラベルを指定します。指定しない場合、表示ラベルは表示されません。 | |
| disabled | Boolean | 無効化された入力範囲の値。この値のデフォルトは false です。 | |
| variant | String | バリエーションによってスライダの外観が変更されます。使用できるバリエーションは standard と label-hidden です。この値のデフォルトは standard です。 | |
| messageWhenBadInput | String | 不正な入力が検出された場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenPatternMismatch | String | パターンの不一致が検出された場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenTypeMismatch | String | 種別の不一致が検出された場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenValueMissing | String | 値がない場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenRangeOverflow | String | 範囲を超えたことが検出された場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenRangeUnderflow | String | 範囲を下回ったことが検出された場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenStepMismatch | String | ステップの不一致が検出された場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| messageWhenTooLong | String | 値が長すぎる場合に表示されるエラーメッセージ。setCustomValidity と共に使用します。 | |
| onblur | Action | スライダがフォーカスを解放したときにトリガされるアクション。 | |
| onfocus | Action | スライダにフォーカスが設定されたときにトリガされるアクション。 |