スライダー「input type="range"」の色を「ツマミ」の前後で変更

こんにちは、さち です。

先日の記事で、HTML のスライダー <input type="range"> のデザインを「CSS」で変更する方法について書きました。

この時は、「バー」の色が「1色」だけでしたが、今回は上図のように「ツマミ」の前後で色を分けて「2色」にしてみます。

スライダーをデザインする

実行結果

HTML

<input type="range" class="slider" min="0" max="10" step="0.5" value="2">

CSS

.slider {
  -webkit-appearance: none;/* CSS適用のおまじない */
  appearance: none;/* CSS適用のおまじない */
  background: lightgreen;/* バーの色 */
}

（以下省略）

<input type="range"> のデザインを変える CSS については、以前の記事で詳しく書いたので省略。「バー」の色に関する部分だけを掲載しています。

background は1色だけ指定しておきます。これは、次項の「JavaScript」が動作しない場合に備えたものです。

JavaScript

/* input 要素を取得 */
let slider = document.querySelector('.slider');

/*【関数】バーの色を現在値に合わせる */
function setSeekbar(elm) {
  // 値の取得
  let now = parseFloat(elm.value);// 現在値
  let max = parseFloat(elm.getAttribute('max'));// 最大値
  let min = parseFloat(elm.getAttribute('min'));// 最小値

  // 現在値がバーではどの位置［％］なのかを計算
  let percent = (now - min) / (max - min) * 100;

  // 算出した位置［％］を linear-gradient に適用
  elm.style.background = `linear-gradient(to right, steelblue ${percent}%, lightgreen ${percent}%)`;  
}

/* 初期値に合わせてバーの色を変える */
setSeekbar(slider);

/*【イベント】現在値が変わったらバーの色を変える */
slider.addEventListener('input', function() {
  setSeekbar(this);
});

バーを「2色」にするために、バーの背景色に linear-gradient() を使っています。

「関数」では <input> の現在値を取得して「ツマミ」の位置［％］を計算し、これを linear-gradient() の色が変わる位置として使用。これで、「ツマミ」の前後で「バー」の色が変わります。

また、slider.addEventListener('input', ～) によって、<input> の現在値に変更があるとイベントが発火。「関数」を実行します。

【おまけ】 スライダーをまとめて設定

実行結果

HTML

<input type="range" class="slider" min="0" max="10" step="0.5" value="2">
<input type="range" class="slider" min="5" max="20" step="5" value="15">
<input type="range" class="slider" min="-5" max="5" step="1" value="-1">

min max などをいろいろな値にしてあります。

CSS

.slider {
  -webkit-appearance: none;/* CSS適用のおまじない */
  appearance: none;/* CSS適用のおまじない */
  background: lightgreen;/* バーの色 */
}

（以下省略）

JavaScript

/* input 要素をすべて取得 */
let sliders = document.querySelectorAll('.slider');

/*【関数】バーの色を現在値に合わせる */
function setSeekbar(elm) {
  // 値の取得
  let now = parseFloat(elm.value);// 現在値
  let max = parseFloat(elm.getAttribute('max'));// 最大値
  let min = parseFloat(elm.getAttribute('min'));// 最小値

  // 現在値がバーではどの位置［％］なのかを計算
  let percent = (now - min) / (max - min) * 100;

  // 算出した位置［％］を linear-gradient に適用
  elm.style.background = `linear-gradient(to right, steelblue ${percent}%, lightgreen ${percent}%)`;  
}

/* バーの色を設定 */
sliders.forEach((inp)=> {
  // 初期値に合わせてバーの色を変える
  setSeekbar(inp);

  //【イベント】現在値が変わったらバーの色を変える
  inp.addEventListener('input', function() {
    setSeekbar(this);
  });
});

関連記事

【CSS】 スライダー「input type="range"」のデザインを変更する

こんにちは、さち です。今回は、HTML のスライダー <input type="range"> のデザインを「CSS」で変更する方法について書いていきます。CSS の書き方が少し特殊なので、備忘録です。

at.sachi-web.com

2025.02.26