input[type=”range”] という出番が少ないタグですが、使う機会があったので、色々と忘れないように。

ローンのシミュレーションや自動見積もりなどで使うことがあるかと。

まずは HTML。

<ul>
	<li><input type="number" id="sampleView" name="sampleView" min="0" max="2000" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>

jQuery は次のように。

$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( $(this).val() );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});
});

カンマ区切りにしたい場合、input[type=”number”] ではカンマ区切りができないので、input[type=”text”] として、次を使う。

<ul>
	<li><input type="text" id="sampleView" name="sampleView" value="50"></li>
	<li><input type="range" id="sampleRange" name="sampleRange" step="10" min="0" max="2000" value="50"></li>
</ul>

$(function(){
	const sampleView  = $('#sampleView');
	const sampleRange = $('#sampleRange');
	sampleRange.on('input change',function(){
		sampleView.val( addComma( $(this).val() ) );
	});
	sampleView.on('keyup',function(){
		sampleRange.val( $(this).val() );
	});

	function addComma(num)
	{
		return String(num).replace(/(\d)(?=(\d{3})+(?!\d))/g,'$1,');
	}
});