Javascript CSS-纯CSS中的旋钮光标+；安格拉斯

在使用jQuery旋钮框架之后，我意识到使用AngularJS动态值很困难，并决定用纯CSS创建我自己的圆弧/旋钮

在旋钮中，我代表3个值：最小值、最大值和当前值，它们都应该是动态的。当值超过其范围时，旋钮的颜色会改变

HTML:

JS:

函数getColor（）{ 如果（$scope.value>$scope.max）{ 返回“电弧危险”； } 如果（$scope.value<$scope.minimum）{ 返回“弧灰”； } 返回“arc_success”； } 现在，如果值在这个范围内，我想用一个小旋钮光标来说明它，类似于jQuery旋钮中实现的那个

这是指向plunkr的链接，它说明了我想要实现的目标。

---

我喜欢这个想法，但我认为您不应该在不使用JQuery的全部功能的情况下完全放弃使用它。我已将JQuery旋钮更新为动态

我不确定使用两个div是否是答案。如果你真的不能使用它的功能来满足你的需求，也许可以考虑使用一个圆形的进度条

---

希望这能有所帮助。

那么你想用CSS重写整个JavaScript库，并希望有人为你做这件事吗？不。我正在寻找一种CSS/js方式来演示旋钮上的光标，只需以jQuery旋钮为例说明它的潜在外观。“CSS进度圈”问题是一个很好的重定向。我使用了那里公认的答案来实现一个基于CSS的进度循环。感谢您在回答中提供了多种选择和透明度。

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

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

$('.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()}); 
});