Gauge Style Range Control With SVG and Vanilla JavaScript – Audials

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

More Examples: