[SOLVED]Please help me with this Code

Question

I want to add transition to the progress bar as soon as it's value is changed but I can't do it.Please help me with it.

https://code.sololearn.com/WQK9KMBf7ZYW/?ref=app

The problem has been solved as follows

https://code.sololearn.com/W4ADB7x4CJ1K/?ref=app

Answer 1

Siddharth i can animate the progress in the following code but not according to the value of the input box...Maybe you can do that:-

https://code.sololearn.com/WuYD9ky3113D/?ref=app

Answer 2

Hmmm???
Value Work with transition???
My stupid brain say "no way"

If you want transition to it
you should make your own progress bar instead
(mean need child parent and node)
(Easy way...)

Answer 3

@Siddharth
Replace your update function with below one. This is a hack for animation.

function update() {
var interval = setInterval(function(){
progress.value++;
if(progress.value == input.value){
clearInterval(interval);
}
}, 10);
}

Answer 4

@Ashwani your method works great....But once it reaches a point (example : take value as 55) we cant get it back by adding a smaller value less than the former one

Answer 5

@Nikhil this is not a full proof solution. This is just an idea. Which can be further be modified to decrement progress bar value also.

e.g If input.value is less than initial progress.value then progress.value--

Answer 6

Thank you @Ashwani sir Please check this one

https://code.sololearn.com/W4ADB7x4CJ1K/?ref=app

Answer 7

You can use 'oninput' event instead of both 'onchange' and 'onkeyup':

<input id="value" oninput="update()" max="100" min="0">

;)

[ edit ]
... and lose the habit of using slash ( / ) at end of self-closing tag ^^

Answer 8

@Siddharth Saraf
👍😄
Ah...Setinterval instead of transition!

Answer 9

@Siddharth,
https://codepen.io/mcraiganthony/pen/waaeWO
Take a look at this code, there is animation on progress bar, but not on value change.