Usage

<div class="number"></div>
<div class="number" style="font-size: 2em"></div>
<script src="./NumberGauge.min.js"></script>
<script>
  document.querySelectorAll('.number').forEach(function(elem){
    new NumberGauge({
      target: elem,
      props: {
        value: 60,
        arrows: '30,80', // Default: 50,70
        thresholds: '30,80', // Default: 50,70
        colors: '#f00,#00f,#0f0' // Default: '#e8523b,#397d9b,#80b62e'
      }
    })
  })
</script>

Usage 2 (modern browsers only)

Support for Custom Elements · Polyfill

<number-gauge value="60"></number-gauge>
<script src="./NumberGauge.custom.min.js"></script>

More examples

<number-gauge></number-gauge>

<number-gauge value="60"></number-gauge>

<number-gauge value="12" arrows="12"></number-gauge>

<number-gauge value="80" arrows="70,90"></number-gauge>

<div style="font-size: 2em">
  <number-gauge value="80" arrows="70,90"></number-gauge>
</div>
<div style="font-size: 3em">
  <number-gauge value="80" arrows="70,90"></number-gauge>
</div>

size based on font-size: width = 4em

<number-gauge value="80" arrows="10,30,50,70,90"></number-gauge>