jQuery UI を使えばスライダーを簡単に設置できますが、デフォルトだと つまみ がちょっと大きい気がします。大きさを変え、ついでに色を変える方法を見ていきます。
- 目次 -
スポンサーリンク
ui-slider-handle で指定
つまみのデザイン指定は css の ui-slider-handle クラスで行います。
サイズを指定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $('#slider-default').slider(); $('#slider-custom').slider(); }); </script> <style type="text/css"> /* css つまみサイズ調整 */ #slider-custom .ui-slider-handle { width:14px; height:14px; margin-top:2px; } </style> </head> <body> <p>デフォルト</p> <div id="slider-default" style="width:200px;"></div> <p>つまみサイズ調整</p> <div id="slider-custom" style="width:200px;height:10px;"></div> </body> </html> |
デフォルト
つまみサイズ調整
色を指定
ui-slider-handle には色も指定できます。
|
1 2 3 4 5 6 7 8 9 10 |
<style type="text/css"> /* css つまみサイズと色を調整 */ #slider-custom .ui-slider-handle { width:14px; height:14px; margin-top:2px; background:#0088ff; /* 色 */ border:3px solid #000088; /* border */ } </style> |
つまみサイズと色を調整
ui-slider-range
ui-slider-range を指定すると、移動範囲を指定の色で塗りつぶせます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript"> $(function() { $('#slider-custom').slider({ range: "min" // 左側を塗りつぶす （max なら右側） }); }); </script> <style type="text/css"> /* css つまみサイズと色を調整 */ #slider-custom .ui-slider-handle { width:14px; height:14px; margin-top:2px; background:#0088ff; border:3px solid #000088; } /* css 移動範囲の色 */ #slider-custom .ui-slider-range { background:#c7e7f7; } </style> </head> <body> <div id="slider-custom" style="width:200px;height:10px;"></div> </body> </html> |
つまみを動かすとバーの色が変わります
slider メソッドで range を指定しないと色は反映されません。（上記ソースは min を指定）。range: “min” で 左側、range: “max” で 右側 が塗りつぶされます。