How to make the numbers change synchronously with the value of the slider?

Question

css

Good afternoon, as you can see in the code there is a slider with its value in% and when you drag the bar, the value immediately changes, rather than with numbers ( $ and L ).. How to make the numbers change immediately without releasing the slider button, just like changes value in %?, https://codepen.io/milnik/pen/ewVEOJ
Thanks in advance for your help!

Answer 1

We need to listen not onchange, but oninput

$('#inputslider').on('input', function () {
      var v = $(this).val();
      var dolar = $('#dollars');
      var litr = $('#litters');
      var input = v*3;
      var output = v*1;
      $('#dollars').html("$" + input);
      $('#litters').html(output + "l");
  });

but it's rather strange that you use the jQuery library with angular, although you could do it on Angular