Nextion User Guide 4:An Entry Application of Slider Component and Timer Component

In this tutorial we’ll introduce slider component and timer component, and explain how to apply them to your project. As usual, we’ll show you an entry example for each component.

Slider Component

A slider component is used to create a controllable slider, from which you can vary number, time, progress, etc.

Slider Component Property Table:


objname Component name, double click it to rename
local:current page
global:a variable can be applied to other component in any page
mode horizontal: slider in horizontal direction
vertical: slider in vertical direction
sta crop image: crop background image to achieve transparent effect
solid color:solid color background
image:component background is image
psta solid: cursor in solid color
image: cursor in image
bco Background color
pco Cursor color
pic Background image
picc Background cropped image(must be full screen image)
wid Cursor width
hig Cursor height
val Initial cursor value
maxval Maximum cursor value(65535)
minval Minimum cursor value(0)
x Coordinate X
y Coordinate Y
w Component width, when drag the component side line
to change the width, it gets changed accordingly
h Component height, when drag the component side line
to change the height, it gets changed accordingly

Example: (Download the example here)

We are going to create an interface with a slider to be controlled between 0 to 100.
So we need to create one slider component and a text component. Here we go.
At first, we add a slider component to the display area, drag and drop it to desired position. Then modify the attribute table as below:

Then add a text component in the middle. The settings are as below:

This is how the interface hopefully look like:

Download the source code to your mega2560, then you can control the text by the slider.
You can see the real effect demonstration from our video at the end of this post.

Timer Component

A timer component is used to create a timer, it triggers an event every circle time.
This component is very different from previous components. It can not be directly showed in the interface. With some codes, we can use it to control other components.

Let’s first look at the timer component attribute table:

Property Name Explanation
objname Component name, double click it to rename
tim Set initial circle time in ms (50 to 65535)
en Trigger the timer (0-Disable, 1-Enable)

Example:(Download this example here)

In this example, you can modify the circle time by buttons and the timer can be turned on and off. So we need two text components to show the time and circle time, three button components to turn on or off the timer and control the circle time.
Then we create the components and arranged as below:

The settings are as below:

Next, add a timer component and set it as below, the initial circle time is 100, which means for every 100ms, the timer adds 1. When you press ADDTIME and make it 500, which means for every 500ms, the timer adds 1.

Then upload the source code to Arduino Mega 2560. As you can see the demonstration video at the end of this post, when press ADDTIME to make the circle time value bigger, the timer becomes slower, in contrast, when press DECTIME, the timer runs faster.

Demonstration Video


So far, we have learnt all current components tutorials (variable component exceptional). I hope with these series basic tutorials, you can quickly get started using Nextion Editor to design your own interfaces. For the coming components, we’ll post related tutorials once they are available.

For variable component and if conditional statement, our library does not have any supported examples. We think it would be better if we write a sole post for them. So next post we’ll introduce them in details, stay tuned!

If you have any questions about these components, please leave your comments below the post. Or you can go to our forum. We welcome you to share your project with us!

Leave a Reply

%d bloggers like this: