inputのtype=rangeのようなUIを実装できるjQuery UIのSliderを使ってみます。 基本的な使い方 必要なファイルをCDNから読み込みます。 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> body内にSliderで使用する要素を追加します。 HTML <div class="slider-wrapper"> <div id="slider"></div> </div>