タッチデバイスの「input type=”range”」の挙動を改善してくれるJavaScript「Rangetouch」

タッチデバイスでinput type="range"を使った場合、スライダーのバー部分をタップしてもなんの反応もありません。これをタップした位置へツマミを移動したり値を取得したりと、OSネイティブのスライダーのように挙動を改善してくれるMITライセンスのJSライブラリを紹介します。

デモページ（要タッチデバイス）：https://rangetouch.com/

リポジトリ：RangeTouch - GitHub

使い方

npmなら

npm i rangetouch -D

CDNから読み込むなら

<script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>

です。

input（type="range"）要素が1つなら、次のようにCSSセレクタまたは要素で指定します。（npmの人はimport RangeTouch from 'rangetouch'を忘れずに）

const inputRange = new RangeTouch('[type=range]')

要素が複数ある場合は、次のようにします（マルチインスタンス）。引数はCSSで指定できるセレクタを使えます。

const inputRange = RangeTouch.setup('[type=range]')

オプション

基本的にはデフォルトのまま使えばほぼ問題ないですが、次のオプションが設定できます。

addCSS（デフォルト：true）
対象要素のタップ時の動作を改善するスタイルシートを挿入します。Rangeそのものの動作改善ではなく、選択やタップ時に関わる次のスタイルがJSで追加されるようです。

userSelect = 'none';
webKitUserSelect = 'none';
touchAction = 'manipulation';

thumbWidth（デフォルト：15）
タップしたときの値の算出に使用されます。タップしたときの値が感覚とずれている場合、調整してみるといいでしょう。

watch（デフォルト：ture）
マルチインスタンスのときに使えるオプションで、指定したセレクタとマッチした要素があとから追加されるのを監視します。

API

APIにはdestroy()があり、インスタンスを破棄してイベントリスナーを削除できます。ちなみにaddCSSオプションで追加されたスタイルは削除されないようです。

inputRange.destroy()

注意点（9/3追記）

input要素にタッチイベントを取られるため、例えばスクロールしようとしてスライダー部分をタッチしたらツマミが動く、という動作になります。どちらを優先させるか、検討した上で導入しましょう。

---

ライブラリ自体は2016年からあるようで今更感はありますが、何かのお役に立てば。