現在の値

現在の値

現在の値

現在の値

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.fs.ranger.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.fs.ranger.min.js"></script>
<script>
    $(window).load(function(){
		$ele = $('input[type=range]');
		$ele.ranger();
		var _count = $ele.size();
		for(var i=0; i<_count; i++) {
			$($ele.get(i)).prev().find('span').text($($ele.get(i)).val());
		}
		$ele.change(function(){
			$(this).prev().find('span').text($(this).val());
		});
    });
</script>
<div class="Ranger-box">
	<p class="current-value">現在の値<span></span></p>
	<input type="range" name="range_1" min="10" max="50" />
	<p class="current-value">現在の値<span></span></p>
	<input type="range" name="range_2" min="-30" max="100" value="35" step="10" />
	<p class="current-value">現在の値<span></span></p>
	<input type="range" name="range_3" min="0" max="1" value="0.56" step="0.02" />
</div>


<div class="Ranger-box Ranger-box02">
	<p class="current-value">現在の値<span></span></p>
	<input type="range" name="vertical_1" min="0" max="100" value="75" step="5" data-ranger-options='{"vertical":"true"}' />
</div>

Rangerについて

Rangerは、スライダーで値を選択できるUIを簡単に設置できるプラグインです。
ユーザビリティーがあがりそうですね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • Chosen

    Chosen

    セレクトボックスの見た目と機能をグレードアップ

  • timepicker

    timepicker

    時間の入力を簡単にしてくれる

  • fancyInput

    fancyInput

    入力フォームの文字入力をユニークな見た目、動作に変更

  • ClearableTextField

    ClearableTextField

    入力フォームに文字を入力すると文字削除用のボタンを表示

  • selectize

    selectize

    inputボックス、selectボックスなどの入力ボックスの使い勝手を向上してくれる