Author: | tenKinetic |
---|---|
Views Total: | 2,116 views |
Official Page: | Go to website |
Last Update: | January 14, 2016 |
License: | MIT |
Preview:

Description:
Audials is a vanilla JavaScript plugin that visualize any values into touchable, customizable, vector shaped and gauge-style dial graph. A great alternative to default range input.
How to use it:
Download the Audials and then include the tk-audials.min.css & tk-audials.min.js on the webpage.
<script src="build/tk-audials.min.js"></script> <link rel="stylesheet" href="build/tk-audials.min.css">
Add the CSS class ‘tk-audial’ to a container element.
<div id="demo" class="tk-audial"></div>
Draw a circular range control inside the container you just created.
var demo = document.querySelector('#demo'); var demoDial = new TkAudial(demo, {// options here});
All available options.
// 'gain' or 'balance'. type: 'gain', // 'notch' or 'fill' display: 'notch', // (Number) Range start min: 0, // (Number) Range end. max: 100, // (Number) Legal interval. 0.01..n (values are rounded to two decimal places) step: 1, // (Number) A global modifier unique to the individual control. // Intended to make dials with very large or very small ranges more user friendly. sensitivityMultiplier: 1, // (Boolean) If false the sensitivityMultiplier will only be applied if the user has activated a key or touch modifier. alwaysMultiply: true, // (Number) Initial value. value: 50, // (String) Style value (EG white, #, rgb, rgba). borderColour: null, // (Number) borderWidth: 8, // (String) Style value (EG white, #, rgb, rgba). indicatorBackgroundColour: null, // (String) Style value (EG white, #, rgb, rgba). indicatorColour: null, // (Number) indicatorWidth: 15, // (String) Style value (EG white, #, rgb, rgba). valueBackgroundColour: null, // (String) Style value (EG white, #, rgb, rgba). valueColour: null, // (String) Style value (EG 1.2em, 22px, 12pt, 90%). valueFontSize: '1em', // (String) used for name and id of a hidden form input. inputId: null, // (Boolean) Set touch modifier count to zero when releasing a dial. zeroModifiers: false, // (Boolean) Add the control value to the clipboard when releasing a dial. enableClipboard: false