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

Question

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

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

Я использую тег <input> и регулятор 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
         }
     });
 });

Answer 1

Вы пытались добавить строку в var val = Math.ceil(this.animatedVal); вместо этого? Например: var val = Math.ceil(this.animatedVal) + ' %';, затем просто верните val;

РЕДАКТИРОВАНИЕ В ЭТОМ:

попробуйте заменить return val + '%'; на var newVal = val + ' %'; $('.temperature').val(newVal);.

Для добавления временного символавместо ℃ попробуйте добавить String.fromCharCode(176) так: val + String.fromCharCode(176);