数値入力をスライダーにして操作性を向上させる強化ガジェット

フォームブロックに置いて各フィールドに対してスライダーを生成し、操作性を向上させるガジェットのご紹介です。
name値とスライダー設定を指定するだけで、自動的にスライダーが生成され、初期値が設定されます。

この様なイメージでスライダーを作成できます。

注意点

・スライダーの範囲やステップ値を適切に設定してください
・HTML5の<input type="range">を使用しているため、古いブラウザでは動作しない可能性があります

コード設定方法

ブロックもしくはページの Javascript タブにコードを貼り付けて、スライダー設定を変更してください。
設定値は例で入れていますので、参考に変更をしてください。

Javascript

// 設定値
function setSliderValues() {
    createSlider('f01', { min: 0, max: 100, step: 1 });
    createSlider('f02', { min: 0, max: 10, step: 2 });
    createRangeSlider('f03', 'f04', { min: 0, max: 100, step: 1 });
    createSlider('f05', { min: 0, max: 100, step: 1, thresholds: { yellow: 40, red: 70 } });
}

// ページ読み込み時の初期化処理
// 他の強化ガジェットと併用する場合はこちらに記載
window.onload = function () {
    setSliderValues();
};

// 以下編集不要
// 汎用スライダー生成関数
function createSlider(name, options = {}) {
    const inputElement = document.querySelector(`input[name="${name}"]`);
    if (!inputElement) return console.error(`Slider input [name="${name}"] not found.`);

    const { min = 0, max = 100, step = 1, thresholds } = options;

    inputElement.style.display = 'none';
    const slider = document.createElement('input');
    slider.type = 'range';
    slider.min = min;
    slider.max = max;
    slider.step = step;
    slider.value = inputElement.value || min;

    inputElement.value = slider.value; // 初期値を同期

    // スライダーの色変更 (thresholdsが指定された場合のみ)
    const updateSliderColor = (slider, value) => {
        if (thresholds) {
            if (value >= thresholds.red) {
                slider.style.backgroundColor = 'red';
            } else if (value >= thresholds.yellow) {
                slider.style.backgroundColor = 'yellow';
            } else {
                slider.style.backgroundColor = '';
            }
        }
    };

    // 初期色設定
    updateSliderColor(slider, slider.value);

    // スライダー値の同期処理
    slider.addEventListener('input', () => {
        inputElement.value = slider.value;
        updateSliderColor(slider, slider.value);

        // 値表示
        let displaySpan = inputElement.parentNode.querySelector('.slider-value');
        if (!displaySpan) {
            displaySpan = document.createElement('span');
            displaySpan.classList.add('slider-value');
            inputElement.parentNode.insertBefore(displaySpan, inputElement.nextSibling);
        }
        displaySpan.textContent = slider.value;
    });

    // DOMにスライダーを追加
    inputElement.parentNode.insertBefore(slider, inputElement);

    // 初期値を表示
    let displaySpan = inputElement.parentNode.querySelector('.slider-value');
    if (!displaySpan) {
        displaySpan = document.createElement('span');
        displaySpan.classList.add('slider-value');
        inputElement.parentNode.insertBefore(displaySpan, inputElement.nextSibling);
    }
    displaySpan.textContent = slider.value;

    return slider; // スライダー要素を返す
}

// 範囲スライダー生成関数
function createRangeSlider(minName, maxName, options = {}) {
    const minInput = document.querySelector(`input[name="${minName}"]`);
    const maxInput = document.querySelector(`input[name="${maxName}"]`);
    if (!minInput || !maxInput) return console.error(`Range slider inputs [name="${minName}"] or [name="${maxName}"] not found.`);

    const { min = 0, max = 100, step = 1 } = options;

    const minSlider = createSlider(minName, { min, max, step });
    const maxSlider = createSlider(maxName, { min, max, step });

    // スライダー値の連動
    minSlider.addEventListener('input', () => {
        maxSlider.min = minSlider.value;
        if (parseInt(minSlider.value) > parseInt(maxSlider.value)) {
            maxSlider.value = minSlider.value;
            maxInput.value = maxSlider.value;
        }
    });

    maxSlider.addEventListener('input', () => {
        minSlider.max = maxSlider.value;
        if (parseInt(maxSlider.value) < parseInt(minSlider.value)) {
            minSlider.value = maxSlider.value;
            minInput.value = minSlider.value;
        }
    });
}

CSS

/* スライダーのスタイル */
input[type="range"] {
    -webkit-appearance: none;
    width: 200px;
    height: 10px;
    background: #ddd;
    outline: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border-radius: 50%;
    cursor: pointer;
}

/* スライダー値表示用 */
span.slider-value {
    display: inline-block;
    margin-left: 10px;
}

スライダー設定例

上記の`setSliderValues`関数を参考にして、スライダーを簡単に設定できます。以下に詳細な使用方法を記載します。

関数の詳細な説明

ここでは、スライダー生成のための関数`createSlider`と`createRangeSlider`の詳細な説明を記載します。

createSlider
単一のスライダーを生成します。

パラメータ

name: 対象のフィールドのname値を指定します。
options: オプション設定。以下のプロパティを含みます。

min: スライダーの最小値 (デフォルト: 0)。
max: スライダーの最大値 (デフォルト: 100)。
step: スライダーのステップ値 (デフォルト: 1)。
thresholds: 値に応じた色を変更するための閾値 (オプション)。オブジェクト形式で指定します。

使用例

createSlider('f01', { min: 0, max: 100, step: 1 });

createSlider('f05', { min: 0, max: 100, step: 1, thresholds: { yellow: 40, red: 70 } });

機能

- 指定されたフィールドを対象にスライダーを生成します。
- スライダー操作時に、対応するhiddenフィールドに値を反映します。
- スライダーの値に応じて背景色を変更する設定が可能です。

createRangeSlider
2つのスライダーを連携して範囲選択スライダーを生成します。

パラメータ

minName: 範囲の最小値を設定するフィールドのname値。
maxName: 範囲の最大値を設定するフィールドのname値。
options: オプション設定。以下のプロパティを含みます。

min: スライダーの最小値 (デフォルト: 0)。
max: スライダーの最大値 (デフォルト: 100)。
step: スライダーのステップ値 (デフォルト: 1)。

使用例

createRangeSlider('f03', 'f04', { min: 0, max: 100, step: 1 });

機能

- 2つのスライダーを連携し、片方の値が変更された場合、もう片方のスライダーの範囲制約を自動調整します。
- 値が逆転しないように安全な値設定を行います。

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。

不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

注意点

コード設定方法

関数の詳細な説明

最後に

関連記事