Circular Slider

JavaScript

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

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

[ads_center]

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

関連記事

  1. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  2. jQuery.GI.TheWall.js
  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  4. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  5. Multi-Screen.js
  6. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP