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. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  2. Parazoom

    JavaScript

    クールに拡大・チルトする画像ズーム「Parazoom」

    Parazoomはクールに拡大・チルトする画像ズーム機能を実装できるj…

  3. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  4. JavaScript

    とても簡単にクールなドロップダウンを実装できるjQueryプラグイン「DropKick」

    個人的に使いやすそうだったので備忘録です。DropKickというjQu…

  5. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  6. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP