# App lab how to make a slider?

**URL:** <https://forum.code.org/t/app-lab-how-to-make-a-slider/15989>\
**Category:** Unit and Lesson Discussion\
**Tags:** csp-unit-3\
**Created:** [May 2, 2018, 4:37am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989 "2018-05-02T04:37:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rfarnay](https://avatars.discourse-cdn.com/v4/letter/r/b4bc9f/32.png) [@rfarnay](https://forum.code.org/u/rfarnay)\
**Post date:** [May 2, 2018, 4:37am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/1 "2018-05-02T04:37:11Z")

</div>

How do I make a slider on the screen, so I can drag between two variables?

---

<div class="post-metadata">

**Author:** ![frank\_w\_lee](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/frank_w_lee/32/4895_2.png) [@frank\_w\_lee](https://forum.code.org/u/frank_w_lee)\
**Post date:** [May 3, 2018, 12:09am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/2 "2018-05-03T00:09:36Z")

</div>

Hi @rfarnay,

Can you clarify what you mean by “drag between two variables”?

I created a super simple demo of the slider here to show basic usage: [https://studio.code.org/projects/applab/nQE9Wc2gZ-azRShsRLPKbg](https://studio.code.org/projects/applab/nQE9Wc2gZ-azRShsRLPKbg)

Frank

---

<div class="post-metadata">

**Author:** ![rfarnay](https://avatars.discourse-cdn.com/v4/letter/r/b4bc9f/32.png) [@rfarnay](https://forum.code.org/u/rfarnay)\
**Post date:** [December 2, 2018, 6:11am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/3 "2018-12-02T06:11:22Z")

</div>

For example, how to change volume of music using slider.

---

<div class="post-metadata">

**Author:** ![kaitie\_obryan](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kaitie_obryan/32/1304_2.png) [@kaitie\_obryan](https://forum.code.org/u/kaitie_obryan)\
**Post date:** [December 6, 2018, 12:36am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/4 "2018-12-06T00:36:03Z")

</div>

I don’t think you can control the volume in AppLab, BUT I can show you how to use the slider:

> **[Check out what I made](https://studio.code.org/projects/applab/9Hi2HOMkC1Ka0DeAARPdrg)**
>
> I wrote the code myself with Code.org

Happy coding @rfarnay

---

<div class="post-metadata">

**Author:** ![frank\_w\_lee](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/frank_w_lee/32/4895_2.png) [@frank\_w\_lee](https://forum.code.org/u/frank_w_lee)\
**Post date:** [December 8, 2018, 6:49am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/5 "2018-12-08T06:49:36Z")

</div>

Your slider demo is so much better than mine. 😓

😁

---

<div class="post-metadata">

**Author:** ![kaitie\_obryan](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/kaitie_obryan/32/1304_2.png) [@kaitie\_obryan](https://forum.code.org/u/kaitie_obryan)\
**Post date:** [December 8, 2018, 2:47pm UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/6 "2018-12-08T14:47:04Z")

</div>

Haha - TOTALLY missed your link! #DuelingDemos

---

<div class="post-metadata">

**Author:** ![theresevalente](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/theresevalente/32/9676_2.png) [@theresevalente](https://forum.code.org/u/theresevalente)\
**Post date:** [October 15, 2024, 5:54pm UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/7 "2024-10-15T17:54:36Z")

</div>

Could you look at this slider and tell me why the red bar does not match the slider value in size? How can I fix this for a student?  
Thank You!

> **[Check out what I made](https://studio.code.org/projects/applab/XYeFrIIXMqG65fq5QZ2iKfrUXjsivF24Wg6BFpIBvkk)**
>
> I wrote the code myself with Code.org

---

<div class="post-metadata">

**Author:** ![varrience](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/varrience/32/8042_2.png) [@varrience](https://forum.code.org/u/varrience)\
**Post date:** [October 16, 2024, 8:47am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/8 "2024-10-16T08:47:29Z")

</div>

the trick is just to use the slider as a percentage base to calculate the proportional width needed to get them to sync up with each other

```js
var sliderInput = getNumber("slider1");
var maxWidth = getProperty("slider1", "width") - 10 // must be some weird offset bc it should work without 10
setSize("label1", sliderInput, sliderInput);
onEvent("slider1", "input", function (event) {
  sliderInput = getNumber("slider1");
  setNumber("label2", sliderInput);
  setPosition("label3", 20, 150, (sliderInput / 100) * maxWidth, 25);
});

```

---

<div class="post-metadata">

**Author:** ![theresevalente](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/theresevalente/32/9676_2.png) [@theresevalente](https://forum.code.org/u/theresevalente)\
**Post date:** [October 16, 2024, 11:38am UTC](https://forum.code.org/t/app-lab-how-to-make-a-slider/15989/9 "2024-10-16T11:38:48Z")

</div>

> [@varrience](#):
>
> ```auto
> var sliderInput = getNumber("slider1");
> var maxWidth = getProperty("slider1", "width") - 10 // must be some weird offset bc it should work without 10
> setSize("label1", sliderInput, sliderInput);
> onEvent("slider1", "input", function (event) {
> sliderInput = getNumber("slider1");
> setNumber("label2", sliderInput);
> setPosition("label3", 20, 150, (sliderInput / 100) * maxWidth, 25);
> });
> 
> ```

Thank you for your help.