Search code examples
jqueryangular-directivejquery-knobround-slider

jQuery knob - Rendering issues

I'm trying to use a jquery knob in angular, and i've created a directive in order to use it.

Now, i've seen many jquery knob examples, and in most of them, there's the current value displayed in the centre of the dial...but not in my case! And also, how do i set the numbers to be WITHOUT DECIMALS?

Here's my html and angular directive code:

HTML

<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">

knob.js

angular.module('knob', [])
    .directive('knob', function () {
        return {
            restrict: 'E',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModel) {
                element.knob({
                    min: attrs.min,
                    max: attrs.max,
                    thickness: .2,
                    step: .5,
                    angleOffset: -125,
                    displayInput: true,
                    angleArc: 250,
                    change: function (value) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(value);
                        });
                    }
                });
                ngModel.$render = function () {
                    element.val(ngModel.$viewValue).trigger("change");
                };
            }
        };
    });

Here's how it looks on the browser:

enter image description here

And here how i'd like it to be (not talking about the color, but about the value displayed as INT in the middle)

enter image description here

Many thanks in advance

EDIT

As suggested, i replaced jquery knob with roundSlider, but i have a couple of issue that can be found here: http://jsbin.com/doketasuju/edit?html,output

1) Why do i have white background in a "diamond shape" style that i don't want?

2) If i type something in the input, it's not working!

This is an example on how i'm going to use it, but i need to fix this couple of issues first. Thanks

EDIT 2

Something like this to add labels:

enter image description here

And it should obviously display min and max values from the slider attributes

Solution

  • For EDIT 2:

    Currently there is no inbuilt option for label support. But you can achieve that functionality by using the internal code. Check the below demo:

    http://jsbin.com/gazara/1/edit?html,output

    Here by adjusting the margin values for .num1 span and .num2 span classes you can position the label.

    Demo with half slider: http://jsbin.com/tamumo/edit?html,output