Create your first Slider

Getting started with Touch Portal

This overview will show you how to create your first Slider. We will create a slider that controls the volume of the default Windows audio output.

Step 01: Opening the button detail screen

We start with clicking on an empty space on a page where we want the slider to be placed. Sliders can, the same as buttons, stretch over multiple grid cells on your page. We will add the slider on the space next to the button we already have on this page.

This will open the known edit page for you control. This opens by default as a button but we can change that to a slider. Currently the selector is set on a button, but if you click on it you can select a Slider.

This will change the whole screen into the Slider edit screen. All options on this page will be for your Slider.

Step 02: The Slider edit screen

The Slider edit screen looks similar to the button edit screen. Lets get into the section:

1. Connectors list

With buttons we could add all sorts of actions to a button which were executed when for example the button was pressed. Sliders are quite different and they need to be connected to a specific control or value in a specific software application. Hence the name of these new entities: Connectors. The list will show all available connectors that you can use.

2. List of Connectors attached to the Slider

Similar as with buttons you can select a Connector from the list on the left and they will be added to the list of attached connectors. When you use the Slider they will send the percentual value of the slider position to the connectors attached and they will send the new value to the control or value it is connected to.

You cannot reorder this list as it has no function. All connectors will be called upon whenever the slider is used.

3. Slider settings

In this panel you can customize your slider with a lot of options. More on this later.

Step 03: Connect to Windows Default Volume

From the Connectors list, select the Windows Audio as shown on the image. When you do this, that Connector will be added in the list of attached Connectors. From this moment when using the slider, it will control the windows audio output.

Smart Slider You probably have noticed the word (Smart) behind the name of the Connector. This indicator means that the Slider will work both ways. When you use it in Touch Portal it will change the control outside of Touch Portal. But changing it outside of Touch Portal will also update the state within Touch Portal. This makes it a smart Slider. Non-smart sliders only work from Touch Portal but are not updated when the control is changed outside of Touch Portal.

Step 04: Customize the Slider

Although we have a functional Slider already, we want to make it a bit visual attractive as well. We have changed the following settings:

In the first tab of the Slider settings you will find all options regarding the slider bar. We have changed the colors and we made the side margins a bit bigger. This results in a smaller slider bar. Because we do not want our Slider to reach the full ends of the cell, we also added a bit of endpoint margin. This will position the Slider in the cell but will leave a bit of space on top and below. We also made the bar have rounded corners and we added a control object. In this case a colored circle. The colored circle will automatically have a size related to the width of the bar itself. In some ocassions this may not be optimal so play around with it a bit to fit what you like.
We also added a label to the Slider. We put it below the Slider bar.
And finally we have made the space the Slider takes on the Page a bit bigger so it fills the current page. We made it 2 rows bigs.

In this tutorial we will not change the background of the Slider nor do we add an icon. Play around with that yourself and learn more about it. Backgrounds work the same way as they do with buttons.

End Result

Your Slider will now look like this.

Now put up some music on your Windows and control the volume with this Slider!

Back to Guide Overview