/circular-input

Highly customizable circular input

Primary LanguageJavaScript

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: '',
};