<alier-slider>

概要

スライダーによる入力を行うためのカスタムエレメントです。

スライダーは一つの溝（track）とつまみ（thumb）からなる入力部品で、溝に対するつまみの位置が一つの数値に対応し、溝の両端がそれぞれつまみが指示する数値の最小値と最大値を示します。また、つまみの動く幅と数値の変化は、つまみの位置がどこにあっても変わりません。言い換えると、つまみの変位と数値の変化は比例関係にあります。

<alier-slider></alier-slider>
<alier-slider value="0" min="-50" max="50" step="1"></alier-slider>
<alier-slider value="50" min="0" max="100" step="1" orientation="vertical"></alier-slider>

<alier-slider> は、<input type="range"> を拡張したエレメントであり、次の特徴があります：

  • 属性 orientation によって溝の向きを指定できます

<alier-slider> を使うには以下の import 文の宣言または import() 式の評価が必要です。

//  静的インポート
import "/alier_sys/AlierSlider.js";

//  動的インポート
await import("/alier_sys/AlierSlider.js");

子要素

なし

カテゴリー

このエレメントはフォーム関連要素です。<form> で値を送信したり <label> を紐づけしたりできます。

構造

<alier-slider> は以下のような構造になっています。

# ── control
  • control ノードは入力コントロールを指しています

属性

グローバル属性 にも対応しています。

入力関連

名前 有効な値 説明
value min 以上かつ max 以下の数値（min <= value && value <= max） スライダーの値を表します
min value 以下かつ max との差分が step 以上の数値（min <= value && step <= (max - min)） スライダーの最小値を表します
max value 以上かつ min との差分が step 以上の数値（value <= max && step <= (max - min)） スライダーの最大値を表します
step 0 より大きく、かつ max と min の差分以下の数値（0 < step && step <= (max - min)）または文字列 "any" スライダーの値の間隔を表します
disabled 論理属性 スライダーが無効であることを示します

value 属性

スライダーの値を表します。

<input> 要素と異なり、value 属性は既定値でなく現在の値を表し、スライダーの操作によって後から変更され得ます。

この値は同名の value プロパティと同期されます。 特定の値で value プロパティを初期化したい場合、value 属性の値を明示的に指定してください。

min 属性

スライダーの最小値を表します。

この値は同名の min プロパティと同期されます。 特定の値で min プロパティを初期化したい場合、min 属性の値を明示的に指定してください。

max 属性

スライダーの最大値を表します。

この値は同名の max プロパティと同期されます。 特定の値で max プロパティを初期化したい場合、max 属性の値を明示的に指定してください。

step 属性

スライダーの値の間隔を表します。

"any" を指定した場合、number 型で表現できる最小の幅まで受け入れます。 その他の数値変換できない文字列および正でない数に変換される文字列は、無効な値として無視されます。

"any" でない値が step 属性に指定されている場合、スライダーの値は min プロパティの値に step プロパティの整数倍を足した値となります。

この値は同名の step プロパティと同期されます。 特定の値で step プロパティを初期化したい場合、step 属性の値を明示的に指定してください。

disabled 属性

スライダーが無効であることを示します。

無効なスライダーは有効なスライダーと表示上区別され、また、つまみを操作できなくなります。

この値は同名の disabled プロパティと同期されます。 特定の値で disabled プロパティを初期化したい場合、disabled 属性を明示的に指定してください。

表示関連

名前 有効な値 説明
orientation "vertical", "horizontal" スライダーの溝が伸びる向きを示します

orientation 属性

スライダーの溝が伸びる向きを示します。

  • "vertical" を指定した場合、溝は画面の下から上へ垂直に伸びます
  • "horizontal" を指定した場合、溝は文章の書字方向に沿って水平に伸びます

この値は同名の orientation プロパティと同期されます。 特定の値で orientation プロパティを初期化したい場合、orientation 属性の値を明示的に指定してください。

フォーム関連

名前 有効な値 有効な type 説明
name 任意の値 "_charset_" と "isindex" を除くすべての文字列 コントロールの名前で、フォーム送信したときにコントロールの値と共に送信されます。
form 任意の値 すべて 関連する <form> 要素の識別子（id）です。

その他

名前 有効な値 有効な type 説明
data-active-events イベント種別のカンマ区切りリスト すべて ProtoViewLogic に関連付けるイベントを指定します。既定では input が指定されています。

スタイル

カスタムCSSプロパティ

<alier-slider> は以下のカスタムCSSプロパティ（CSS変数）に対応しています：

名前 効果
--alier-accent-col 溝の開始点からつまみまでの部分の色
--alier-ambient-col つまみから溝の終了点までの部分の色
--alier-dropshadow スライダーの周囲につける影 （box-shadow）
--alier-slider-thumb-width つまみの横幅。親要素に対する相対値は指定できません。
--alier-slider-thumb-height つまみの高さ。親要素に対する相対値は指定できません。
--alier-slider-thumb-cursor スライダー上でカーソルをホバーした際のカーソルの表示。指定がない場合 pointer が使われます。
--alier-slider-thumb-cursor-grab つまみ上でカーソルをホバーした際のカーソルの表示。指定がない場合 grab が使われます。
--alier-slider-thumb-cursor-grabbing つまみをドラッグしている間のカーソルの表示。指定がない場合 grabbing が使われます。

AlierSlider クラス

モジュールパス: /alier_sys/AlierSlider.js

--- config: class: hideEmptyMembersBox: true --- classDiagram direction LR HTMLElement <|-- AlierCustomElement AlierCustomElement <|-- AlierSlider

<alier-slider> を操作するためのインターフェースを提供します。

このクラスを直接使用する場合、以下のようにインポートします。

//  静的インポート
import { AlierSlider } from "/alier_sys/AlierSlider.js";

//  動的インポート
const { AlierSlider } = await import("/alier_sys/AlierSlider.js");

プロパティ

value

スライダーの値です。

このプロパティは min 以上かつ max 以下の値をとります（min <= value && value <= max を満たします）。

スライダーがフォーム要素に関連付けられている場合、このプロパティの値がフォームデータとして送信されます。

このプロパティは同名の value 属性と値が同期されます。 value 属性の型は文字列または null ですが、このプロパティの型は number です。

value 属性が未定義の場合、このプロパティの値は 50 です。

型

number

min

スライダーの最小値です。

このプロパティは value 以下かつ max と min の差分が step 以上になるような値をとります（min <= value && step <= (max - min) を満たします）。

このプロパティは同名の min 属性と値が同期されます。 min 属性の型は文字列または null ですが、このプロパティの型は number です。

min 属性が未定義の場合、このプロパティの値は 0 です。

型

number

max

スライダーの最大値です。

このプロパティは value 以上かつ max と min の差分が step 以上になるような値をとります（value <= max && step <= (max - min) を満たします）。

このプロパティは同名の max 属性と値が同期されます。 max 属性の型は文字列または null ですが、このプロパティの型は number です。

max 属性が未定義の場合、このプロパティの値は 100 です。

型

number

step

スライダーの値の最小の変動幅です。

0 でない値が step プロパティに指定されている場合、スライダーの値は min プロパティの値に step プロパティの整数倍を足した値となります。

このプロパティは 0 以上かつ max と min の差分が step 以上になるような値をとります（0 <= step && step <= (max - min) を満たします）。

このプロパティは同名の step 属性と値が同期されます。 step 属性の型は文字列または null ですが、このプロパティの型は number です。 特殊な値として、このプロパティの値が 0 の場合、対応する step 属性の値は "any" となります。

step 属性が未定義の場合、このプロパティの値は 1 です。

型

number

disabled

このエレメントの disabled 属性です。コントロールが無効かどうかを表します。

このプロパティは同名の disabled 属性と値が同期されます。 disbled 属性は論理属性であり、定義されていれば、このプロパティは true、定義されていなければ false をとります。

型

boolean

position

このエレメントのつまみの位置です。

値はつまみが最小値の位置にあったときを 0、最大値の位置にあったときを 1 とするように規格化されています。

この値は value プロパティ、min プロパティ、max プロパティを使い、次の計算式から計算されます。

position = value / (max - min)

型

number

orientation

このエレメントの溝の伸びる方向です。

  • "vertical" を指定した場合、溝は画面の下から上へ垂直に伸びます
  • "horizontal" を指定した場合、溝は文章の書字方向に沿って水平に伸びます

このプロパティは "vertical", "horizontal" のみを受け付けます。

このプロパティは同名の orientation 属性と値が同期されます。

orientation 属性が未定義の場合、このプロパティの値は "horizontal" となります。

型

string

イベント

input

スライダーのつまみが移動した際に発火します。

発生するイベントは内部の <input> 要素から送られた InputEvent です。