Как строить график сразу при изменении Range ползунка?

Question

[Евгений]

День добрый. Есть Ренж Ползунки

Ползунки

<div class="slidecontainer">
                    <input type="range" min="0" max="100" value="0" class="slider" id="myRange">
                    <p>Цена: <span id="demo"></span></p>
                </div>
                <div class="slidecontainer">
                    <input type="range" min="0" max="100" value="0" class="slider" id="myRange1">
                    <p>Топливо: <span id="demo1"></span></p>
                </div>
                <div class="slidecontainer">
                    <input type="range" min="0" max="100" value="0" class="slider" id="myRange2">
                    <p>Водитель: <span id="demo2"></span></p>
                </div>

И круговая диаграмма, использовал библиотеку ecomfe.github.io

На стадии теста сделал костыль.

$('#myRange').change(function() {
    var price =  $('#myRange').val();
    var fuel =  $('#myRange1').val();
    var man =  $('#myRange2').val();
    ChartMaz(price,fuel, man);

});
$('#myRange1').change(function() {
    var price =  $('#myRange').val();
    var fuel =  $('#myRange1').val();
    var man =  $('#myRange2').val();
    ChartMaz(price,fuel, man);

});
$('#myRange2').change(function() {
    var price =  $('#myRange').val();
    var fuel =  $('#myRange1').val();
    var man =  $('#myRange2').val();
    ChartMaz(price,fuel, man);

});

Всё работает, всё строит, но когда я тяну ползунок, ивент пока не срабатывает,а отпускаю клик срабатывает.

А как сделать так чтобы было так: Я тяну ползунок и не отпуская его тут же строится диаграмма?

Answer 1

[Владимир Проскурин]

Слушайте событие oninput а не onchange. А лучше оба, т.к. oninput например не поддерживается в IE10 и ниже.

Comments

[Евгений]

Пробовал oninput - не вызывает функцию

[Владимир Проскурин]

Евгений, в jQuery пишите просто input

$('#myRange').input(function() {
//...
});

или вместе если

$('#myRange').on('input change', function() {
//...
});

[Евгений]

Владимир Проскурин, Приписывал я как у вас в первом варианте. Сейчас попробую второй

[Евгений]

Владимир Проскурин, Хм, удивительно. Просто input я и раньше вводил, не работал. А теперь сделал input change и заработал, хоть и пострадала из-за этого анимация. Ладно спасибо, пойду дальше делать