ng-knob | Angular.js directive to Knob component powered by d3.js

ng-knob directive


Stars : 10

Forks : 10

Created by

bower install ng-knob

Demo Download GitHub


Join the chat at

Angular.js directive to Knob component powered by d3.js (without jQuery)



  • 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


  • 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


You can also use bower to install the component:

$ bower install ng-knob --save


<body ng-app="KnobDemoApp">
  <div ng-controller="knobCtrl">
    <ui-knob value="value" options="options"></ui-knob>

<script src=""></script>
<script src=""></script>
<script src="bower_components/ng-knob/dist/ng-knob.min.js"></script>
var app = angular.module('KnobDemoApp', ['ui.knob'])
app.controller('knobCtrl', function ($scope) {
  $scope.value = 65;
  $scope.options = {
    size: 300
    //other options


You can pass these options to the initialize function to set a custom look and feel for the plugin.
skinobject{ type: 'simple', width: 10, color: 'rgba(255,0,0,.5)', spaceWidth: 5 }Type: simple or tron
animateobject{ enabled: true, duration: 1000, ease: 'bounce' }Duration in milliseconds, Ease: linear, bounce, sin, cubic, quad, exp, circle
sizeinteger200Size of knob in px. It will always be a square
startAngleinteger0Start angle in degrees
endAngleinteger360End angle in degrees
unitstring''Unit values
displayInputbooleantrueDisplay input value (true or false)
inputFormatterfunctionfunction(value){ return value; }Formats the input value before appending the unit and displaying it to the DOM
readOnlybooleanfalseDisabled change value (true or false)
trackWidthinteger50Width track bar in px
barWidthinteger50Width bar value in px
trackColorstring'rgba(0,0,0,0)'Color track bar
barColorstring'rgba(255,0,0,.5)'Color bar value
prevBarColorstring'rgba(0,0,0,0)'Color bar previous value
textColorstring'#222'Text color
barCapinteger0Defines how the ending of the bar line looks like in radius
trackCapinteger0Defines how the ending of the track line looks like in radius
fontSizestring'auto'Font size in px. auto: automatic change
subTextobject{ enabled: false, text: '', color: 'gray', font: 'auto' }Subtext options
bgColorstring''Background color
bgFullstringfalsePaints the background of the whole circle ignoring startAngle and endAngle
scaleobject{ enabled: false, type: 'lines', color: 'gray', width: 4, quantity: 20, height: 10, spaceWidth: 15 }Scale options, type: lines or dots
stepinteger1Step change, min 0.1
displayPreviousbooleanfalseDisplay previous value (true or false)
mininteger0Min value (start value), only integer
maxinteger100Max value (end value), only integer
dynamicOptionsbooleanfalseDynamic change options (true or false)


  1. Fork the repo
  2. Install dependencies: npm install and bower install
  3. Run: grunt
  4. Make your changes
  5. Submit pull request


Licensed under the MIT license


Javascript plugin