Slider Command Action

1. Navigate to HSYCO Manager

2. Create a new project or open an existing one

3. Go to Home page

4. Click "add"

5. Add a "Slider"

6. Go back to "edit" mode

7. You can align the object by clicking "Align" and then "Center Vertically"

8. You can also move the object or resize it by dragging one of the corners

9. Change the "Label"to "Slider"

10. Change the "Action" to "command"

11. Change the "Name" to "slider". This can be any string and is the name of the command launched by the slider

Tip: Now we'll add the text object that will show the value of the slider

12. Click "add"

13. Add a "text" object

14. Resize it and move it to the right of the slider like this:

15. Click "edit"

16. Leave the "Text" attribute blank as this will be modified later by the code

17. Change the ID of the object to "textarea"

18. Change the "Font Size" to 50 to have the number written large

19. Click "Save" to save the project

Tip: Great! Now we'll write some code to modify the text showed based on the slider value

20. Go to "File Manager"

21. Navigate into the "events" folder

22. Click "New File"

23. Give it a name ("slider.txt" for example) and click "New File"

**24. Copy the following code and save the file:

function userCommand(session, userid, name, param) : {
    if(name.equals("slider")){
        uiSet("textarea", "text", param);
    }
}

What this does is it changes the "text" attribute of the object with ID "textarea" and it sets it to the param value, which is the value passed by the slider**

25. Now go back into the "Project Editor", click "Run" and then "Default" to launch the application

26. The page should look like this, with the text object blank:

27. If we change the value of the slider, that value is displayed in the text area. In this case, 81