CSS - Knob cursor in pure CSS + AngularJS

Question

After playing around with the jQuery Knob framework, I've realized that it was difficult to work with AngularJS dynamic values and decided to make my own arc/ knobs in pure CSS.

In the knob, I represent 3 values: minimum, maximum and current value, which should all be dynamic. The color of the knob changes when the value exceeds its range.

HTML:

<div class="{{getColor()}} arc arc_start"></div>

JS:

function getColor(){
if($scope.value > $scope.maximum){
  return "arc_danger";
}
if($scope.value < $scope.minimum){
  return "arc_gray";
}
return "arc_success";
}

Now, if the value is within the range, I want to illustrate it using a small knob cursor, similar to the one implemented in jQuery Knob.

This is the link to the plunkr, which illustrates what I want to achieve. http://plnkr.co/edit/Zb8bVih4hireLwNS3bfc?p=preview

So you want to rewrite a whole JavaScript library using CSS, and you want someone to do it for you? — Seano666, Apr 12 '17 at 16:39
No. I'm looking for a css/ js way to illustrate a cursor on a knob, simply taking the jQuery Knob as an example of how it could potentially look. — Peter Buju, Apr 13 '17 at 17:19

score 1 · Accepted Answer · edited May 23 '17 at 12:17

I like the idea, but I don't think you should fully discard using JQuery's knob without using its full capabilities. I've update your JQuery knob to be dynamic.

plnkr link

$('.knob').on("input", function() {
      $scope.value = $('#value').val();
      $scope.minimum = $('#min').val();
      $scope.maximum = $('#max').val();
      $('.dial').val($scope.value);
      $('.dial').trigger('change');
      $('.dial').trigger('configure', {'min': $scope.minimum,'max':$scope.maximum,'fgColor':getColor()}); 
});

I'm not sure if using two divs on top of each other is the answer. If you really cannot use its functionality for your needs, perhaps look into using a progress bar shaped in a circle.

SO question link

jsfiddle link

Hope this helps.

The "CSS Progress Circle" question was a great redirect. I used the accepted answer from there to implement a CSS based progress circle. Thanks for the multiple alternatives and transparency in your answer. — Peter Buju, Apr 18 '17 at 10:40

CSS - Knob cursor in pure CSS + AngularJS

1 Answers1