# svg-dial
> A customizable, responsive SVG dial UI element
Latest version **1.0.8** (published 2015-06-01) · MIT license · 0 weekly downloads
## Install
```sh
npm install svg-dial
pnpm add svg-dial
yarn add svg-dial
bun add svg-dial
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.8 |
| Published | 2015-06-01 |
| First published | 2015-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Michael Phillips |
| Maintainers | createbang |
| Keywords | svg, dial, knob |
## Links
- npm: https://www.npmjs.com/package/svg-dial
- Repository: https://github.com/createbang/svg-dial
- Issues: https://github.com/createbang/svg-dial/issues
- npm.io page: https://npm.io/package/svg-dial
## Dependencies (1)
- [snapsvg](https://npm.io/package/snapsvg.md) 0.4.x
## Recent versions
- 1.0.8 (latest) — 2015-06-01
- 1.0.6 — 2015-05-26
- 1.0.5 — 2015-05-20
- 1.0.4 — 2015-05-20
- 1.0.3 — 2015-05-19
- 1.0.2 — 2015-05-19
- 1.0.1 — 2015-05-19
- 1.0.0 — 2015-05-19
## README
svg-dial
============
A customizable, responsive SVG dial UI element.
## Introduction
After becoming frustrated with the lack of flexibility and support of [jQuery-knob](http://anthonyterrien.com/knob/), I decided to create my own SVG dial that allowed me to customize the look and feel of the dial.
Though this element is designed to be highly customizable, it doesn't deviate from the design structure of the notch in the bottom section, the dial, etc. However, colors, font styles, sizes, and some other items are all customizable.
This may fit your needs and asthetics, it may not.
## Installation
This package is available for installation via npm and bower
```sh
$ npm install svg-dial
```
```sh
$ bower install svg-dial
```
## Usage
The only dependency this library has is on [Snap.svg](http://snapsvg.io/). It assumes this library is available to the module, and is configured to look for it in the AMD, CommonJS (Browserify) and global environments.
### CommonJS (Browserify)
```js
var SVGDial = require('svg-dial');
new SVGDial(document.getElementById('dial-container'), {
onChange: function(percentage) {}
});
```
### AMD
```js
define(['svg-dial'], function(SVGDial) {
new SVGDial(document.getElementById('dial-container'), {
onChange: function(percentage) {}
});
});
```
### Global
```html
...
...
```
## API
### Constructor
```
new SVGDial(el, options);
```
##### `el`
Required: `true`
Type: `HTMLElement`, `jQuery`, `String`
Description: Can either be a DOM element, a jQuery object or a selector string.
Purpose: Identifies the target block element that the `