Как отображать символ температуры и процента рядом с динамическим значением

У меня есть 2 вопроса здесь.

1. Как отобразить символ температуры внутри ручки рядом с динамическим значением.
2. Как отобразить символ процента (%) внутри ручки рядом с динамическим значением.

Я использую тег <input> и Knob JS.

HTML

<div class="progress-box text-center">
    <input type="text" class="knob temperature" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>
    <h5 class="text-light-blue padding-top-10 weight-500">Temperature</h5>
</div>

<div class="progress-box text-center">
    <input type="text" class="knob water_level"  data-width="120" data-height="120" data-thickness="0.40" data-fgColor="#000000" readonly>
    <h5 class="text-light-blue padding-top-10 weight-500">Water Level</h5>
</div>

JS

$('.temperature').knob();
$('.temperature').attr('data-fgColor', '#11E117');

$.get(('assets/summary/temperature.php'),  // url
     function (data, textStatus, jqXHR) {  // success callback
         console.log(data);
         $({animatedVal: 0}).animate({animatedVal: data}, {
         duration: 3000,
         easing: "swing",
         step: function() {
             var val = Math.ceil(this.animatedVal);
             $(".temperature").trigger('configure', {
             'fgColor': colors[(val < 40) ? 0 : (val < 70) ? 1 : 2]
             }).val(val).trigger("change");
             return val + '%';      // I tried to apply this but not happen
         }
     });
 });