円形スライダーで進捗度などを分かりやすく表示できるjQueryプラグイン「Circular Slider」

Circular Slider

Circular SliderというjQueryプラグインを使えば、円形スライダーで進捗度などを分かりやすく表示させることができます。値をドラッグして直接動かすことも可能です。円の中心には数値も表示されるので、とても見やすいですね。

Circular Sliderの使い方

実際のデモは以下から確認することができます。

Circular Slider

Circular Slider

使い方は、まずhead内にjQuery本体とプラグインファイルを読み込みます。

<link rel="stylesheet" href="circular-slider.min.css" />
<script src="jquery.js"></script>
<script src="circular-slider.min.js"></script>

Circular Sliderを挿入させるタグを記述しておきます。

<div id="slider"></div>

あとはセッティングするだけです。

var slider = $('#slider').CircularSlider();

実際に値を指定する場合は、以下のように記述します。

var circularSlider = $('#slider').CircularSlider({
    min : 0,
    max: 100,
    value : 50
});

minとmaxで範囲を指定して、valueに値をセットします。

  • circle
  • half circle
  • half circle left
  • half circle right
  • half circle bottom

Circular Slider

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives