App lab how to make a slider?

CS Principles Unit and Lesson Discussion
1

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

2

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

Frank

3

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

4

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

Happy coding @rfarnay

5

Your slider demo is so much better than mine. :sweat:

:grin:

1 Like
6

Haha - TOTALLY missed your link! #DuelingDemos

7

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!

8

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

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);
});
1 Like
9

Thank you for your help.