# Slider move when you press the Play button

**URL:** <https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047>\
**Category:** Questions\
**Tags:** gui\
**Created:** [March 10, 2021, 10:47am UTC](https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047 "2021-03-10T10:47:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rossicusa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rossicusa/32/14799_2.png) [@rossicusa](https://forum.babylonjs.com/u/rossicusa)\
**Post date:** [March 10, 2021, 10:47am UTC](https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047/1 "2021-03-10T10:47:40Z")

</div>

Hello everyone friends!  
How to make the slider move when you press the Play button?  
How it is done in the Inspector panel (scene.debugLayer.show()) when playing an GroupAnimation.

For the button I use the following code:

> playButton.onPointerClickObservable.add(function (value) {  
> animationGroup.loopAnimation = false;  
> animationGroup.play(true);  
> });

For slider:

> slider.onValueChangedObservable.add(function (value) {
> 
> ```
> header.text = "Current frame: " + ((value * 24) | 0);
> 
> scene.animationGroups[0]
> 
> .start(false, 1, value, value)
> 
> .goToFrame(value);
> });
> 
> ```

In this case, the slider is not associated with the button.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 10, 2021, 11:11pm UTC](https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047/2 "2021-03-10T23:11:38Z")

</div>

Welcome aboard!

You should provide a repro in the Playground ([https://playground.babylonjs.com/](https://playground.babylonjs.com/)), it will be easier for people to help.

---

<div class="post-metadata">

**Author:** ![rossicusa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rossicusa/32/14799_2.png) [@rossicusa](https://forum.babylonjs.com/u/rossicusa)\
**Post date:** [March 11, 2021, 5:04am UTC](https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047/3 "2021-03-11T05:04:48Z")

</div>

@Evgeni_Popov thanks for the answer ))

[https://playground.babylonjs.com/#68AHME#3](https://playground.babylonjs.com/#68AHME#3)

I want to get it like in the picture:

 ![12](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/030555a17a96c85bf9216da0dd1443dbf22856b6.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 11, 2021, 11:24am UTC](https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047/4 "2021-03-11T11:24:10Z")

</div>

Here’s what the inspector is doing:

> <https://github.com/BabylonJS/Babylon.js/blob/master/inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationGroupPropertyGridComponent.tsx#L73-L83>

So, in your case, you could do something like:

[https://playground.babylonjs.com/#68AHME#5](https://playground.babylonjs.com/#68AHME#5)

---

<div class="post-metadata">

**Author:** ![rossicusa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rossicusa/32/14799_2.png) [@rossicusa](https://forum.babylonjs.com/u/rossicusa)\
**Post date:** [March 11, 2021, 3:49pm UTC](https://forum.babylonjs.com/t/slider-move-when-you-press-the-play-button/19047/5 "2021-03-11T15:49:43Z")

</div>

@Evgeni_Popov super, thank you very much ))