If we make a small edit to our HTML code, we can easily display the current gauge value:
<div data-gauge data-min="0" data-max="100" data-percent="50" data-orange-from="60" data-red-from="90" data-trembling>
<span>50</span>
<div data-arrow></div>
</div>
And following is the code to add within the div[data-gauge]
selector:
span{ display: block; color: #DDD; @include px_and_rem(font-size, 1.5, $multiplier); text-align: center; @include px_and_rem(width, 10, $multiplier); @include px_and_rem(height, 5, $multiplier); @include px_and_rem(line-height, 5, $multiplier); }
The result: