レンジ入力

レンジ入力（単一指定）

レンジ入力（単一指定）のコンポーネントにはsu-form-range-inputのクラス名を付与します。

input要素単体ではなく、操作性やアクセシビリティの観点からlabel要素でラッピングするようにマークアップします。

内包するインプット要素は、スライド式のUIを持つため、input[type="range"]を用います。また、min、max、step属性を設定します。

数値入力ができるスライダー型のUIを持つインプット要素です。現在設定されている数値の状態がわかりやすく伝わるようにスタイリングされます。

※UIの挙動を制御するために、レンジ入力のインプット要素にはmin、max、step属性値の指定が必須となります。

<label>
  <input 
    type="range" 
    class="su-form-range-input" 
    min="0" 
    max="100" 
    step="10" 
    value="50" 
    data-su-js="su-form-range-input" 
  />
  <output 
    class="su-form-range-output"
    data-su-js="su-form-range-output"
  ></output>
</label>

インプット要素の兄弟要素にsu-form-range-outputのクラス名を付与したoutput要素を配置することで、入力されている値を出力することができます。入力値はJavaScriptで取得するため、要素にはdata-su-js="su-form-range-output"のカスタムデータ属性値を指定します。

レンジ入力のスライダーサイズや背景色、またホバーやフォーカス時のアウトラインの色はCSS変数を使って変更することが可能です。また、入力値を出力する要素のプレフィックスやサフィックスもCSS変数を使って変更することが可能です。

※レンジ入力のスライダーサイズで指定するCSS変数--su-size-button-rangeの値にはremもしくはpxの単位を指定する必要があります。

.su-form-range-input {
  --su-color-border-range-input: red;
  --su-color-border-range-input-hover: blue;
  --su-color-border-range-input-focus: yellow;
  --su-color-bg-button-range-input: lime;
  --su-color-bg-bar-range-input: orange;
  --su-color-fill-bar-range-input: purple;
  --su-size-button-range-input: 40px;
  --su-width-default-range-input: 150px;
}
.su-form-range-output {
  --su-prefix-range-output: '【';
  --su-suffix-range-output: '】';
}

レンジ入力（範囲指定）

レンジ入力（範囲指定）は、最小値と最大値の両方を指定できるコンポーネントです。2つのレンジ入力を組み合わせて実装します。最小値のスライダーは最大値を超えないように、最大値のスライダーは最小値を下回らないように自動的に制約されます。

親要素にsu-form-range-input-multipleのクラス名とdata-su-js="su-form-range-input-multiple"のカスタムデータ属性値を指定し、その中に2つのレンジ入力要素を配置します。

最小値のレンジ入力にはdata-su-js="su-form-range-input-multiple-min"のカスタムデータ属性値と、su-form-range-input-multiple-minのクラス名を指定します。最大値のレンジ入力にはdata-su-js="su-form-range-input-multiple-max"のカスタムデータ属性値と、su-form-range-input-multiple-maxのクラス名を指定します。

出力要素には、最小値用にdata-su-js="su-form-range-output-multiple-min"のカスタムデータ属性値とsu-form-range-output-multiple-minのクラス名を、最大値用にdata-su-js="su-form-range-output-multiple-max"のカスタムデータ属性値とsu-form-range-output-multiple-maxのクラス名を指定します。

<label>
  <div 
    class="su-form-range-input-multiple"
    data-su-js="su-form-range-input-multiple"
  >
    <input 
      type="range" 
      class="su-form-range-input su-form-range-input-multiple-min" 
      min="0" 
      max="100" 
      step="10" 
      value="20" 
      data-su-js="su-form-range-input-multiple-min"
    />
    <input 
      type="range" 
      class="su-form-range-input su-form-range-input-multiple-max" 
      min="0" 
      max="100" 
      step="10" 
      value="80"
      data-su-js="su-form-range-input-multiple-max"
    />
  </div>
  <output 
    class="su-form-range-output-multiple-min"
    data-su-js="su-form-range-output-multiple-min"
  ></output>
  <output 
    class="su-form-range-output-multiple-max"
    data-su-js="su-form-range-output-multiple-max"
  ></output>
</label>

範囲指定のレンジ入力要素のスタイルは、単一指定のレンジ入力要素のスタイルと同じCSS変数を使用し、スタイルを踏襲する形になりますが、出力要素のプレフィックスやサフィックスは異なるCSS変数を使用して変更することが可能です。

.su-form-range-output-multiple-min {
  --su-prefix-range-output-multiple-min: 'min: ';
  --su-suffix-range-output-multiple-min: '（最小値）';
}
.su-form-range-output-multiple-max {
  --su-prefix-range-output-multiple-max: 'max: ';
  --su-suffix-range-output-multiple-max: '（最大値）';
}

状態別のスタイル

レンジ入力のコンポーネントはホバー状態やフォーカス時など各状態が明示されるよう異なるスタイルを提供しています。ホバーやフォーカス時には、それぞれアウトラインの色が変化し表示されるようになっています。disabled属性で無効化されている状態では要素自体の透明度が変化し、無効であることが明示されるスタイルが適用されます。

状態別のスタイルはレンジ入力のインプット要素に設定されていますが、レンジ入力の各状態を示すクラスも用意されており、そのクラスを追加で付与することにより対象の状態と同じスタイルが適用できます。su-form-range-input-state-checkedのクラスでチェック済みの状態、su-form-range-input-state-hoverのクラスでマウスカーソルのホバー状態、su-form-range-input-state-focusのクラスでフォーカス時の状態、su-form-range-input-state-disabledのクラスで無効化状態と同じスタイルになります。

<!-- ホバー状態のスタイル適用 -->
<label>
  <input 
    type="range"
    class="su-form-range-input su-form-range-input-state-hover" 
    data-su-js="su-form-range-input" 
  />
  レンジ入力（ホバー状態）
</label>

<!-- フォーカス状態のスタイル適用 -->
<label>
  <input 
    type="range"
    class="su-form-range-input su-form-range-input-state-focus" 
    data-su-js="su-form-range-input" 
  />
  レンジ入力（フォーカス状態）
</label>

<!-- 無効化状態のスタイル適用 -->
<label>
  <input 
    type="range"
    class="su-form-range-input su-form-range-input-state-disabled" 
    data-su-js="su-form-range-input"    
  />
  レンジ入力（無効化状態）
</label>

アクセシビリティの支援

レンジ入力のコンポーネントはアクセシビリティの対応として、input要素に対してaria-describedby属性を使うことで、より詳しくレンジ入力の説明を案内することができます。そのテキスト要素に対して、su-screen-reader-onlyのクラスを指定することで、スクリーンリーダー向けのテキスト要素として扱うことができ、テキストを非表示とすることができます。

<!-- ラベルテキストに詳しい説明を追加 -->
<label>
  <input 
    type="range" 
    class="su-form-range-input" 
    min="0" 
    max="100" 
    step="10" 
    value="50" 
    data-su-js="su-form-range-input" 
    aria-describedby="range-description" 
  />
  音量調整
</label>
<span id="range-description" class="su-screen-reader-only">
  0から100までの値で音量を調整できます。現在の値は50です。
</span>

<!-- 範囲指定のレンジ入力のアクセシビリティ対応 -->
<label>
  <div 
    class="su-form-range-input-multiple"
    data-su-js="su-form-range-input-multiple"
    aria-describedby="range-multiple-description"
  >
    <input 
      type="range" 
      class="su-form-range-inpu su-form-range-input-multiple-min" 
      min="0" 
      max="100" 
      step="10" 
      value="20" 
      data-su-js="su-form-range-input-multiple-min"
      aria-label="最小値"
    />
    <input 
      type="range" 
      class="su-form-range-input su-form-range-input-multiple-max" 
      min="0" 
      max="100" 
      step="10" 
      value="80"
      data-su-js="su-form-range-input-multiple-max"
      aria-label="最大値"
    />
  </div>
</label>
<span id="range-multiple-description" class="su-screen-reader-only">
  最小値と最大値を指定して範囲を設定できます。最小値は最大値を超えることはできません。
</span>