jQuery UIのSliderを使う

sliderクラスの要素にjQuery UIのSliderを適用させる。

$( ".slider" ).slider( {
	min: 0, /* default: 0 */
	max: 5, /* default: 100 */
	step: 1, /* defaut: 1 */
	value: 0, /* default: 0 */
	orientation: 'horizontal', /* default: 'horizontal' or 'vertical' */
	slide:function(event, ui) { },
	change:function(event, ui) { }
} );

<!-- html部分 -->
<div id="slider1" class="slider"></div>

minやmaxなどのプロパティ値に変数を指定する場合は、必ずparseInt関数で整数化すること。少なくとも1.8.20/21では、minが0より大きな値を取る場合の挙動がおかしくなる。