circular-input

Highly customizable circular input.

Demo Page

Usage

Include circularInput.min.js from dist folder in your html page.

<script src="circularInput.min.js"></script>

Add one of the css file from dist folder, or create your own.

<link href="circularInput.css" type="text/css" rel="stylesheet" />

var circulatInputObject = circularInput(domEl, options);

Arguments:

• domEl: HTMLElement or HTMLCollection
• options: Object (optional)

Options:

• min: min input value
• max: max input value
• step: input value step
• sensivity: 'mousemove to value' sensivity
• theme: name of theme will be added to html/svg classes in BEM standard
• svgDefs: additional svg defs that you want to use

Library supports AMD module loaders.

Example:

  var myInput = document.getElementsByClassName('my-input');
  circularInput(myInput, {
    min: 0,
    max: 10,
    step: 1,
    sensivity: 100,
    theme: 'my-theme',
    svgDefs: ''
  });

Default options:

var defaults = {
    min: 0,
    max: 100,
    step: 5,
    sensivity: 100,
    theme: '',
    svgDefs: '',
};