Rangesliderで魅せる！カスタム調整バーの実装テクニック【JavaScript＋CSS】

7月 7, 2025 7月 7, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、数値の範囲を調整するUI「スライダー（range input）」をよりリッチに見せる方法をご紹介します。

デフォルトのinput type="range" はブラウザによって見た目がまちまちで、デザインにこだわるWeb制作者にとってはちょっと扱いづらいですよね。
この記事では、CSSとJavaScriptを使ってカスタムデザインのスライダーを実装しつつ、ユーザー体験を向上させるヒントをお伝えします！

なぜスライダーをカスタムすべき？

初期状態のスライダーはシンプルですが、以下のような課題があります。

ブラウザごとに見た目が異なる
数値が表示されないため、調整が曖昧になりがち
モバイルで操作しにくい

そのため、カスタマイズされたスライダーは、UXと見た目を両立できるUIパーツとして注目されています。

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本のHTML構造

<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" />
<span id="volume-value">50</span>

このように input type="range" に加えて、現在の値を表示するためのを用意します。

JavaScriptで数値を連動表示

  $('input[type="range"]').rangeslider({
    polyfill: false,
    onSlide: function (position, value) {
      $("#volume-value").text(value);
    },
  });

これでスライダーを動かすたびに、現在の値がリアルタイムで表示されるようになります。

CSSでスライダーをカスタマイズ

rangeスライダーの見た目は、CSSの ::-webkit-slider-thumb や ::-moz-range-track などの疑似要素で調整します。

  input[type="range"] {
    width: 300px;
    -webkit-appearance: none;
    background: transparent;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    background: #1e90ff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    margin-top: -10px;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
  }

これで、iOS/Chrome系ブラウザでカスタムスライダーが美しく表示されます。Firefoxなどに対応するには ::-moz- 系の疑似要素も併用しましょう。

ライブラリ活用例：Rangeslider.js

もっと簡単にクロスブラウザ対応のカスタムスライダーを実装したいなら、Rangeslider.js を使うのも手です。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

導入方法

CDNで簡単に利用できます

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rangeslider.js/dist/rangeslider.css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rangeslider.js/dist/rangeslider.min.js"></script>

初期化コードは以下のとおり

  $('input[type="range"]').rangeslider({
    polyfill: false,
    onSlide: function (position, value) {
      $("#volume-value").text(value);
    },
  });

HTMLは先ほどと同じ構造でOKです。