Как добавить к значению текст?

Question

[Ascorny]

Есть слайдер на Jquery UI, чтобы просчитывать небольшую декомпозицию. Как сделать так, чтобы в значении конверсий после цифр выдавался знак "%"?

<div id="calculator">
            <p>
                <label for="amount">Те, кто увидели предложение: </label>
                <input type="text" id="amount" readonly>
            </p>
            <div id="slider-range-min"></div>
            <p>
                <label for="amount">Конверсия 1: </label>
                <input type="text" id="amount2" readonly>
            </p>
            <div id="slider-range-min2"></div>
            <p>
                <label for="amount">Конверсия 2:</label>
                <input type="text" id="amount3" readonly>
            </p>
            <div id="slider-range-min3"></div>
            <p id="revenue">Клиентов: <strong><span>84</span></strong></p>
        </div>

jQuery(function() {
    var result_outptut = $("#revenue span"),
        client = 1560,
        revenue = 0,
        check = 14,
        time = 54;
    
    var procent = "%";


    function recount() {
        revenue = (client*(check/100)*(time/100));
        result_outptut.html(revenue.toFixed(0)); 
    };
    
    
    $(document).on("change keyup", "#amount", function() {
        client = +$(this).val();
        $("#slider-range-min").slider("value", client);
        recount();
    });
    $(document).on("change keyup", "#amount2", function() {
        check = +$(this).val();
        $("#slider-range-min2").slider("value", check);
        recount();
    });
    $(document).on("change keyup", "#amount3", function() {
        time = +$(this).val();
        $("#slider-range-min3").slider("value", time);
        recount();
    });
});
$(function() {
    $("#slider-range-min").slider({
        range: "min",
        value: 1560,
        min: 1,
        max: 9000,
        slide: function(event, ui) {
            $('#amount').val(ui.value).trigger("change");
        }
    });
    $("#amount").val($("#slider-range-min").slider("value"));
});

$(function() {
    $("#slider-range-min2").slider({
        range: "min",
        value: 14,
        min: 1,
        max: 100,
        slide: function(event, ui) {
            $("#amount2").val(ui.value).trigger("change");
        }
    });
    $("#amount2").val($("#slider-range-min2").slider("value"));
});

$(function() {
    $("#slider-range-min3").slider({
        range: "min",
        value: 54,
        min: 1,
        max: 100,
        slide: function(event, ui) {
            $("#amount3").val(ui.value).trigger("change");
        }
    });
    $("#amount3").val($("#slider-range-min3").slider("value"));
});

Answer 1

[Андрей Б.]

$("#amount2").val($("#slider-range-min2").slider("value") + '%');
$("#amount3").val($("#slider-range-min3").slider("value") + '%');

Comments

[Андрей Б.]

Никита Полевой чего я не угадал?

[Андрей Б.]

Никита Полевой как понял вопрос так и ответил, автор решит

[Ascorny]

Спасибо!)

Answer 2

[Иван Сергеев]

Добавлять символ к результату:

$("#amount").val( String($("#slider-range-min3").slider("value")) + '%' );

или просто на css, если обернуть инпут другим элементом (вне поля input):

<div class="wrapper">
<input type="text" id="amount" readonly>
</div>

.wrapper:after{
  content: '%';
  display: inline-block;
}

Comments

[Андрей Б.]

Иван Сергеев псевдоэлементы не работают в инпутах

[Иван Сергеев]

Андрей Б.:
точно) но можно обернуть в div

[Андрей Б.]

Иван Сергеев ну так приводите пример с оберткой, зачем выкладывать не рабочий вариант )

[Ascorny]

Спасибо!)

Answer 3

[Kovalsky]

1. Найти в коде места где для нужных слайдеров устанавливается значение, добавить к нему символ процента,
2. Там же к исходным значениям нужных слайдеров добавить символ процента,
3. В обработчиках для слайдеров при записи значений в переменные заменить + на parseInt,