All right, so after our three buttons, let's have an input of type range, which is a slider. As you can see, this looks amazing. And so we'll add a few attributes here. Value equals one mean equals 0.1, and let's go max 10. So now we have a range slider ranging from 0.1 to 10. And because the original default value is one, it's close to the left. Let's give also an ID of a slider so

it's close to the left. Let's give also an ID of a slider so that we can go play with it in the JavaScript. So cones, slider equals document, query selector, slider as an input element. All right, so check this out. Just like we added uh, events listeners to the buttons, I will do the same slider add event listener. And I wanna target the change event here. So every time the value changes on the slider, we are going

And I wanna target the change event here. So every time the value changes on the slider, we are going to run some code. And what we want to do for now is sync the slider value to the animation speed. Okay? And here you might be a bit confused with the word speed because after all, if I go in the options here, we have a duration of three seconds. So isn't that the speed?

we have a duration of three seconds. So isn't that the speed? Well, this is going to be the 100% speed, uh, set to 300 millisecond, 3000 milliseconds. Sorry. Uh, so if we set the speeds to the slider range to 0.1, it should be 300 milliseconds. And if we set it to 10, it should be 30,000 uh, milliseconds. So we basically are going to take this duration and then scale it up

So we basically are going to take this duration and then scale it up and down based on the input slider range value. And we can do that with animation dot. And you can see we have playback rate here. So play was a method, but playback rate is a property. So I'm not going to call it like a function, but instead set the value to slider value. And so here TypeScript is useful once again because we might think that we are setting the value

And so here TypeScript is useful once again because we might think that we are setting the value as a number, but actually the value coming from the input range is a string. So we want the number and so we can passe float that value to make sure that it's passed correctly. Now everyone is happy. And so now we should have that slider allowing us to change the speed of the animation.

And so now we should have that slider allowing us to change the speed of the animation. So if I go to the left, it's gonna slow right down. Uh, and if I go to the right and drop, it's going fast. So on change is not the event listener I wanted. I wanted it to change every single time that I drag the handle before I release it. And so I need to change the event. We're listening to change is whenever we release the slider, but I want input here.

We're listening to change is whenever we release the slider, but I want input here. And so this time as I move the slider without releasing it, I have control over the animation speed. That's really cool. And of course the reverse still works. The pose works. The play works, everything works in conjunction. Okay, but I promise that we would scrub through the animation. So let's take a look at how we do that.

that we would scrub through the animation. So let's take a look at how we do that. Let's comment this out. And what we want to do instead here is things, the animation progress to the slider value. Yes. And so one more time, let's look at the properties we have available on the animation instance. And so ality is too good at knowing what I want. I wanna use the current time, which again is a property.

And so ality is too good at knowing what I want. I wanna use the current time, which again is a property. So current time is working in conjunction with the duration of the animation. So the total time here is 3000 milliseconds. So if I was to set current time to half of it, 1.5, that's gonna be a bit weird. But now technically every time I touch the range slider, it should set the animation progress or the current time of the animation to halfway.

it should set the animation progress or the current time of the animation to halfway. Uh, so at the bottom right where it's halfway through the animation, obviously this is not what we want. We want to tie the current time to the position of the scrubbing, uh, handle on the range slider. So let's do that for it to make sense, I need to go back in the animation template here and change the values from min zero to max 100.

and change the values from min zero to max 100. And this time we'll set the original value to zero. So now we have a range slider that ranges from 0% to a hundred percent, which seems to make a bit more sense if we want to tie this to the animation progress. And now every time we slide the slider, we should be able to set the current time to slider value as number, which is going to set the value as a number.

to set the current time to slider value as number, which is going to set the value as a number. Let me update that example to also use value as number so we can get rid of the pass float and I'll comment that out again. Alright, so let's pose R square and try to scrub through the animation. But as you'll see, there is a problem. It looks like we are scrubbing through the animation, but only through a tiny portion of it.

It looks like we are scrubbing through the animation, but only through a tiny portion of it. And while we are scrubbing through the first 100 milliseconds of a 3000 seconds, uh, animation, remember our range goes from zero to a hundred, but the duration of the animation is 3000. If we did have here 3000 milliseconds as the max value, I think that then it would work properly. And so we should be able to scrub through the entire animation just like we expect.

And so we should be able to scrub through the entire animation just like we expect. So that's working. Is there a way to not hard coding the value either in the HTML or in the js? Yes, there is. Let's go back to a hundred here to illustrate our points and check this out. Here I am before setting the value, going to get the ConEd total duration by reaching for copilot.

to get the ConEd total duration by reaching for copilot. Let me surprise people. Animation that. And there is an effect, which is a property that itself contains methods that you can call here. What we want to use is the get timing, not compute timing. I'll show you that after. And so if we call that method, you will see that on that method we have access to all the values, delayed direction, easing that were available on

to all the values, delayed direction, easing that were available on the key frame animation options. This is the same set of values that you have available here. And so if we want to get the duration, we can reach for the dot duration properly. You can see copilot has added the optional chaining here to make sure we don't step on a rake. And the fact that we've set a range slider from zero to 100, that is important.

And the fact that we've set a range slider from zero to 100, that is important. We can multiply that value by the total duration. Yes, it can be undefined here, let's cast it as a number. Otherwise we would have to have a conditional check to check that this is available. But now we can multiply this by the total duration, but that's not going to work just yet. Hopefully you can work out why. Let's console that log, the total duration,

Hopefully you can work out why. Let's console that log, the total duration, I'll put that in an object. So we have the key as well. And I will interact with the slider so that we have the total duration, which is 3000 milliseconds. So here we multiply this total duration with the slider, which is from zero to 100. So the range is going to go way too high. Basically when the slider reaches one out of a hundred,

So the range is going to go way too high. Basically when the slider reaches one out of a hundred, we've already completed the whole animation and then it just goes way too far for no reason. So two options. We can divide, uh, the, uh, calculation we have here by 100, or we can set the range slider from zero to one, which seems pretty simple. So let's keep the calculation like this. We want the current time of the animation

So let's keep the calculation like this. We want the current time of the animation or the progress to be set based on the input value multiplied by the total duration. And for it to work, we want a slider to range from zero to one. So in the blade file, I will change the max value to one. But as you've seen the hint, I also need to set the step to 0.01. So we do have a hundred steps to go

to 0.01. So we do have a hundred steps to go through from left to right. So this time we should be getting close to what we want. Let's pause and let's scrub through the animation from zero to a hundred and back. It's working. We did it.