Как сделать такой ползунок?

Question

[orange_blue]

Пользователь вводит цифровое значение в инпут, которое умножается на определенную цифру и выводится итоговое значение в цифрах. (И чтобы ко всему этому был прикреплен ползунок с цифрами, который можно перетаскивать и изменять итоговое значение)

Как такое можно реализовать?

Answer 1

[Денис]

jQuery UI Slider и можно соорудить что-то вроде этого:

<div id="slider"></div>
<p>
    <input id="inp" type="number" max="100">
</p>

var factor = 4, // число, на которое необходимо умножать значение
    inp = $("#inp").attr('min', factor),
    slider = $('#slider').slider({
        min: factor,
        max: 100,
        range: 'min',
        value: 0,
        step: factor,
        slide: function(event, ui) {
            var num = ui.value / factor;
            inp.val(ui.value);
        }
    });

inp.on('input', function() {
    var num = factor * $(this).val();
    slider.slider('value', num);
});