`<input type="range">`step可変する方法

2 min read

仕様

input range はstepが指定でき、整数や浮動小数の指定によって、スライダーが段階的に変更できる。

stepを5に指定

ただ、今回は等差数列ではなく 0, 100, 500, 1000, 1500, 2000... と規則性のないような数値でstepを変えていきたい。

完成デモ

実装

手続き的に書いているが、こんな感じで実装できる。

<input id="range" type="range" value="0" />
<div id="output">0</div>
const RANGE_VALUES = [
  0, 100, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 5000, 6000, 7000, 8000,
  9000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 60000,
  70000, 80000, 90000, 100000, 150000, 200000, 250000, 300000,
];

const output = document.querySelector("#output");
const range = document.querySelector("#range");

// init
range.setAttribute("min", RANGE_VALUES[0]);
range.setAttribute("max", RANGE_VALUES[RANGE_VALUES.length - 1]);

/**
 * Returns the closest number in the array.
 * @param {Number} num
 * @param {Array}  array
 * @return {Number}
 */
function closestNumber(num, array) {
  return array.reduce((prev, current) => {
    return Math.abs(current - num) < Math.abs(prev - num) ? current : prev;
  });
}

range.addEventListener("input", function () {
  output.innerText = closestNumber(Number(this.value), RANGE_VALUES);
});

input[type="range"]の入力値と RANGE_VALUESの定数を比較して、近似値を取得して表示している。input イベントで都度処理を実行してしまっているので、実際はライブラリなどでキャッシュしながら実行すると良さそう。

参考

このページをシェアする

関連タグ

関連記事

[CSS] 究極のIE対策

条件付きコメント / メディアクエリを利用して IE10〜IE11 に対応する

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

`.sr-only`のような非表示スタイルとSEOの関係性の調査

非表示要素はブラックハット SEO ではないのか