コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > Javascript > 1分で実装！ネイティブ感覚のデュアルレンジスライダーで UI をグレードアップ！

1分で実装！ネイティブ感覚のデュアルレンジスライダーで UI をグレードアップ！

Javascript

Native Dual-range Input

「ネイティブ」という部分はある程度議論の余地があります - このライブラリは2つのネイティブレンジ入力と約60行のJavaScriptを使用して、それらを連携させています。私の観点では、これは十分にネイティブと言えるでしょう。

動作原理に興味がある場合は、ブログ記事をご確認ください。

使用方法

インストール方法:

npm install @stanko/dual-range-input

必要なマークアップを追加:

<div class="dual-range-input">
  <input type="range" min="0" max="100" step="1" value="25" id="min" />
  <input type="range" min="0" max="100" step="1" value="75" id="max" />
</div>

以下の場所にあるCSSファイルをインポート:

./node_modules/@stanko/dual-range-input/dist/index.css

ライブラリをインスタンス化:

import DualRangeInput from '@stanko/dual-range-input';

const $min = document.querySelector('#min');
const $max = document.querySelector('#max');

new DualRangeInput($min, $max);

// ネイティブイベントハンドラを追加
$min.addEventListener('input', () => {
  // ...
});

パラメータ

  • $min HTMLInputElement - 最小値用のレンジ入力要素
  • $max HTMLInputElement - 最大値用のレンジ入力要素
  • precision number, オプション, デフォルトは3 - 中間値を丸める小数点以下の桁数

スタイリング

スタイルはCSSの変数で制御されます。

以下が全ての変数とそのデフォルト値です:

/* 入力の高さ */
--dri-height: 1.5rem;

/* つまみのサイズ */
--dri-thumb-width: 1.25rem;
--dri-thumb-height: 1.25rem;

/* つまみの背景色 */
--dri-thumb-color: #ddd;
--dri-thumb-hover-color: #a8d5ff;
--dri-thumb-active-color: #4eaaff;

/* つまみのボーダー */
--dri-thumb-border-color: rgba(0, 0, 0, 0.1);
--dri-thumb-border-hover-color: var(--dri-thumb-border-color);
--dri-thumb-border-active-color: var(--dri-thumb-border-color);
--dri-thumb-border-radius: 1rem;
--dri-thumb-border-width: 1px;

/* トラックのサイズ */
--dri-track-height: 0.25rem;
--dri-track-border-radius: 1rem;

/* トラックの色 */
--dri-track-color: #ccc;
--dri-track-filled-color: #0084ff;

--dri-thumb-widthはライブラリによってCSS calc()メソッドを通じて使用されることに注意してください。

カスタムテーマ

独自のテーマを作成するには、変数を変更するだけです。例えば、デモページの紫色の例のコードは以下の通りです:

.dual-range-input--purple {
  --dri-thumb-width: 2rem;
  --dri-thumb-height: 2rem;

  --dri-thumb-color: #ddd;
  --dri-thumb-active-color: #682af8;
  --dri-thumb-hover-color: #b697ff;

  --dri-track-filled-color: #682af8;

  --dri-height: 2rem;
}

これにより次のようになります:

デモのSCSSファイルでさらに多くの例を見つけることができます。

:focus-visibleスタイル

これらはデフォルトのフォーカススタイルです。自由にオーバーライドしてください。

.dual-range-input:has(input:focus-visible) {
  outline: 2px solid var(--dri-thumb-active-color);
  outline-offset: 4px;
  border-radius: 4px;
}

API

update(method: 'floor' | 'ceil' = 'ceil')

中間点とグラデーションの塗りつぶしを更新するメインメソッドです。入力の値に直接変更を加えた場合にのみ呼び出す必要があります。

methodは中間点に使用される丸めメソッドです。これは中間点が2つの目盛りの間に落ちる場合にのみ使用されます。直接値を変更する場合、これはあまり重要ではありません。ただし、最小入力が更新された場合、ライブラリはceilを使用し、最大入力が更新された場合はfloorを使用します。

const priceInput = new DualRangeInput($min, $max);

$min.value = 20;
priceInput.update('ceil');

$max.value = 37;
priceInput.update('floor');

destroy()

ライブラリによって設定されたイベントリスナーを削除します。

const priceInput = new DualRangeInput($min, $max);

priceInput.destroy();

WebComponent

今のところ、WebComponentを好む人のために、シンプルな例を示します:

import DualRangeInput from '@stanko/dual-range-input';

class DualRangeInputWebComponent extends HTMLElement {
  constructor() {
    super();

    const $min = this.querySelector('input[type=range]:first-child');
    const $max = this.querySelector('input[type=range]:nth-child(2)');

    new DualRangeInput($min, $max);
  }
}

customElements.define('dual-range-input', DualRangeInputWebComponent);

その他

  • ライブラリはESMモジュールとしてのみ利用可能です。
  • ライブラリにはトラックの周囲の境界線は含まれていません。これはあまりにもハックっぽく感じるためです。ただし、使用したい場合は以下のコードがあります:
.dual-range-input {
  --dri-track-border-color: #ccc;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    background-color: var(--dri-track-border-color);
    border-radius: var(--dri-track-border-radius);
    // 各側に1pxはみ出させる
    height: calc(var(--dri-track-height) + 2px);
    left: -1px;
    right: -1px;
    // 垂直方向に中央揃え
    top: 50%;
    transform: translateY(-50%);
  }

  input {
    // 入力をその上に配置
    position: relative;
    z-index: 1;
  }
}

©コハム