Wijmo 5 - LinearGauge

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
    
<h1>LinearGauge Demo</h1>
    
    <p>
        The <b>isReadOnly</b> property is set to false, 
        so you can change the value by clicking on the gauge.</p>
    
    <wj-linear-gauge
        thickness=".5"
        value="value"
        min="{{min}}"
        max="{{max}}" 
        is-read-only="false">
        <wj-range wj-property="pointer" thickness="0.5"></wj-range>
        <wj-range min="0" max="{{max*.33}}" color="rgba(100,255,100,.1)"></wj-range>
        <wj-range min="{{max*.33}}" max="{{max*.66}}" color="rgba(255,255,100,.1)"></wj-range>
        <wj-range min="{{max*.66}}" max="{{max}}" color="rgba(255,100,100,.1)"></wj-range>
    </wj-linear-gauge>
    
    <p>
        Same thing, but with simpler/cleaner style:</p>
    
    <wj-linear-gauge
        class="cleanGauge"
        use-shadow="false"
        thickness=".5"
        value="value"
        min="{{min}}"
        max="{{max}}" 
        is-read-only="false">
    </wj-linear-gauge>
    
    <p>
        <b>The current value is {{value}}.</b></p>

</div>

CSS

.wj-lineargauge {
    margin: 20px;
    width: 50%;
}

/* clean style */
.cleanGauge.wj-gauge .wj-face path {
  fill: #f8f8f8;
  stroke: none;
}
.cleanGauge.wj-gauge .wj-pointer path {
  fill: #404040;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    $scope.min = 0;
    $scope.max = 100;
    $scope.value = 50;
});