ng-knob
Angular.js directive to Knob component powered by d3.js (without jQuery)
Features
- very easy to implement
- without jQuery dependencies
- powered by d3.js
- 2-way data binding
- configurable minimum, maximum values and step
- animated
- shows previous value
- tiny - 11.5kb minified
- great ability to configure
- configurable scale
- touch, click and drag events implemented
Dependencies
- AngularJS (tested with 1.4.x although it probably works with older versions)
- D3.js (tested with 3.5.x although it probably works with older versions)
Browser Support
- Chrome, Firefox, Safari, Opera, IE9+
Get started
Installation
You can also use bower to install the component:
$ bower install ng-knob --save
Usage
HTML:
<body ng-app="KnobDemoApp">
<div ng-controller="knobCtrl">
<ui-knob value="value" options="options"></ui-knob>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script src="bower_components/ng-knob/dist/ng-knob.min.js"></script>
Angular.js:
var app = angular.module('KnobDemoApp', ['ui.knob'])
app.controller('knobCtrl', function ($scope) {
$scope.value = 65;
$scope.options = {
size: 300
//other options
};
});
Options
You can pass these options to the initialize function to set a custom look and feel for the plugin., Property, Type, Default, Description, ------------------, --------------, -------------------------------------------------------------------------------------------------------, ----------------------------------------------------------------------------------------------, skin, object, { type: 'simple', width: 10, color: 'rgba(255,0,0,.5)', spaceWidth: 5 }, Type: simple or tron, animate, object, { enabled: true, duration: 1000, ease: 'bounce' }, Duration in milliseconds, Ease: linear, bounce, sin, cubic, quad, exp, circle, size, integer, 200, Size of knob in px. It will always be a square, startAngle, integer, Start angle in degrees, endAngle, integer, 360, End angle in degrees, unit, string, '', Unit values, displayInput, boolean, true, Display input value (true or false), inputFormatter, function, function(value){ return value; }, Formats the input value before appending the unit and displaying it to the DOM, readOnly, boolean, false, Disabled change value (true or false), trackWidth, integer, 50, Width track bar in px, barWidth, integer, 50, Width bar value in px, trackColor, string, 'rgba(0,0,0,0)', Color track bar, barColor, string, 'rgba(255,0,0,.5)', Color bar value, prevBarColor, string, 'rgba(0,0,0,0)', Color bar previous value, textColor, string, '#222', Text color, barCap, integer, Defines how the ending of the bar line looks like in radius, trackCap, integer, Defines how the ending of the track line looks like in radius, fontSize, string, 'auto', Font size in px. auto: automatic change, subText, object, { enabled: false, text: '', color: 'gray', font: 'auto' }, Subtext options, bgColor, string, '', Background color, bgFull, string, false, Paints the background of the whole circle ignoring startAngle and endAngle, scale, object, { enabled: false, type: 'lines', color: 'gray', width: 4, quantity: 20, height: 10, spaceWidth: 15 }, Scale options, type: lines or dots, step, integer, 1, Step change, min 0.1, displayPrevious, boolean, false, Display previous value (true or false), min, integer, Min value (start value), only integer, max, integer, 100, Max value (end value), only integer, dynamicOptions, boolean, false, Dynamic change options (true or false), Contributing
- Fork the repo
- Install dependencies:
npm installandbower install - Run:
grunt - Make your changes
- Submit pull request
License
Licensed under the MIT license