InputManJS/JavaScript

InputManJSで高機能なレンジスライダー入力をWebアプリに組み込む！

by MESCIUS-dev

便利で快適な入力フォーム開発に特化したJavaScriptライブラリ「InputManJS（インプットマンJS）」の最新バージョン「V4.1J」では、数値コントロール「GcNumber」でレンジスライダー入力ができるようになりました。ボックス内、ボックス外へのスライダーの表示位置の調整、目盛りの表示、ドロップダウンでのスライダーの表示など、多数の機能がプロパティの設定だけで簡単に使用できます。

InputManJSのスライダー入力

今回はこのレンジスライダー入力の使い方を詳しく解説していきたいと思います。

開発環境

今回は開発環境として以下を使用します。

事前準備

今回は以下の3つのファイルを用意して数値コントロールでのレンジスライダー入力の使い方を解説していきます。

index.htmlページ本体。このページの要素としてInputManJSの数値コントロールを組み込みます
app.jsInputManJSの数値コントロールの初期化など各種設定を行うためのコードを記載します
styles.cssInputManJSの数値コントロールのスタイル設定を行うためのコードを記載します

また、InputManJSの使用にはInputManJSのモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接InputManJSのモジュールを配置していきます。あらかじめInputManJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

  • scripts/gc.inputman-js.ja.js
  • styles/gc.inputman-js.css

コピーしたファイルはそれぞれ以下のように配置します。

コピーしたファイルの配置場所

InputManJSの参照

まずはInputManJSのコントロールを使うのに必要なライブラリの参照設定をHTMLファイルに追加します。InputManJSのモジュールのほか、InputManJSのコントロールの各種処理を記載する「app.js」への参照も追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>InputManJSスライダー入力サンプル</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/gc.inputman-js.css" />
    <script src="scripts/gc.inputman-js.ja.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!--
    <link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/css/gc.inputman-js.css" />
    <script src="https://cdn.mescius.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js"></script>
    -->

    <link rel="stylesheet" href="css/styles.css" />
    <script src="scripts/app.js"></script>
</head>

<body>
</body>

</html>

数値コントロールの組み込みとスライダー入力の設定

それでは早速InputManJSの数値コントロールをWebページに組み込み、スライダー入力ができるように設定していきます。「index.html」の中で、数値コントロールを表示する領域を<input>タグで定義します。

・・・（中略）・・・
<body>
    <input id="gcNumber1">
</body>

</html>

続いて「scripts/app.js」に数値コントロールの初期化処理を記載します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

document.addEventListener('DOMContentLoaded', function () {
    GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';

    GC.InputMan.appearanceStyle = 'modern';

    const gcNumber1 = new GC.InputMan.GcNumber(document.getElementById('gcNumber1'), {
        minValue: 0,
        maxValue: 100,
        value: 50,
        sliderConfig: {
            visible: true,
        },
    });
});

sliderConfigでvisibleプロパティをtrueに設定すると、数値コントロールにレンジスライダーを表示することができます。またminValueプロパティ、maxValueプロパティ、valueプロパティを使用して、それぞれ数値コントロールに入力可能な数値の最小値と最大値、初期表示する数値を定義しています。

続いて「css/styles.css」でInputManJSのコントロールのスタイルの設定を記載します。

.gcim {
    margin: 20px 0 0 20px;
}

以上でテキストコントロールを使用する準備は完了です。Visual Studio Code上で「index.html」を右クリックして、「Open with Live Server」を実行します。

Live Serverを実行

実行後、ブラウザ上にレンジスライダー付きの数値コントロールが表示され、スライダーでの数値入力が可能になります。デフォルトではスライダーは数値コントロールの下側の境界線に表示されます。

スライダー入力の各種カスタマイズ

InputManJSのレンジスライダー入力では各種のカスタマイズがプロパティ設定だけで簡単に実現可能です。

スライダーの表示位置

スライダーの表示位置はpositionプロパティを使用して調整が可能です。デフォルト値はBottomBorderで、スライダーは数値コントロールの下側の境界線に表示されますが、Left、またはRightを指定すると、それぞれ数値コントロールの外の左側、右側にスライダーを表示できます。

・・・（中略）・・・
        sliderConfig: {
            visible: true,
            position: GC.InputMan.SliderPosition.Left
        },
・・・（中略）・・・
スライダーをコントロールの左側に配置
・・・（中略）・・・
        sliderConfig: {
            visible: true,
            position: GC.InputMan.SliderPosition.Right
        },
・・・（中略）・・・
スライダーをコントロールの右側に配置

目盛りラベルとツールチップの表示

スライダーには数値の目盛りをラベルやツールチップで表示することもできます。marksプロパティで任意の数値を設定してスライダーに表示する目盛りを指定できます。その際、showMarkLabelプロパティをtrueに設定すると目盛りの数値をラベルとして表示できます。

・・・（中略）・・・
        sliderConfig: {
            visible: true,
            marks: [0, 20, 40, 60, 80, 100],
            showMarkLabel: true,
        },
・・・（中略）・・・
スライダーに目盛りを表示

また、tooltipShowModeプロパティでスライダーのツールチップの表示モードを変更できます。デフォルト値はHoverでホバー時にのみツールチップが表示されますが、Alwaysを指定すると常に入力されている値がツールチップとしてスライダー上に表示されます。

・・・（中略）・・・
        sliderConfig: {
            visible: true,
            tooltipShowMode: "Always",
        },
・・・（中略）・・・

InputManJSのレンジスライダー入力のカスタマイズオプションについては以下のデモもご参考ください。

ドロップダウンスライダー

InputManJSのレンジスライダー入力はスライダー部をコントロールの内外に常に表示するほか、ドロップダウンボタンを押下したときにスライダーを表示する「ドロップダウンスライダー」を使用することもできます。

初期化時にshowDropDownSliderプロパティをtrueに設定することでドロップダウンスライダーが使用できます。ボタンの表示位置はsliderButtonPositionプロパティ（LeftSide、またはRightSide）で調整が可能です。また、通常のスライダーと同様に目盛りの表示など各種オプションも利用可能です。

・・・（中略）・・・
    const gcNumber1 = new GC.InputMan.GcNumber(document.getElementById('gcNumber1'), {
        minValue: 0,
        maxValue: 100,
        value: 50,
        showDropDownSlider: true,
        dropDownConfig: {
            sliderButtonPosition: GC.InputMan.DropDownButtonAlignment.RightSide,
            marks: [20, 40, 60 , 80, 100]
        }
    });
・・・（中略）・・・

今回ご紹介した数値コントロールのレンジスライダー入力機能は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。

さいごに

今回はInputManJSの数値コントロール「GcNumber」でのレンジスライダー入力の基本的な使い方や各種のオプションの使用方法をご紹介しました。

製品サイトでは、InputManJSの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／