How to make a slider


Attached Files

The following files have been attached to this tutorial:



3,063 visits, 4,882 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

This is a short tutorial that show how to make a slider. I have used the same slider in some of my games for "unlocking" the screen and as an alternative to a "Play Again" button. But it is really only your imagination setting the limits to what the slider should do after the user has slid it into position.

This is what the slider will look like. There are two background images, one that says "slide to play again" and one that says "slide to unlock":

Sprites setup

There are two sprites a slider and a background. The slider has two instance variables on it:

- sliderMin

- sliderMax

The background doesn't have any instance variables but it does have two extra imagepoints:

- imagepoint1 = start position of the slider

- imagepoint2 = end position of the slider

With this setup we can scale the slider and even accidentally miss-align the slider with the background and everything will still work like it should.


There are two functions:

- InitSlider

- OnSliderComplete

InitSlider is called "On start of layout" and sets up the initial parameters.

First it sets the position of the slider to imagepoint1 of the background and then it sets the sliderMin and sliderMax to the x position of the backgrounds imagepoint 1 and 2.

OnSliderComplete is called once when the slider is slid to it's correct position. In this example I've set it up so that it plays a "lock" sound and sets the slider to the correct position. In this function you could for example add a reset global variables and Layout restart.

Touch handling

There are a few things that we want from the slider:

1. it should only be able to move it between imagepoint1 and imagepoint2 on the background.

2. it should only move horizontally

3. if we release it before we complete the slide it should move back to the start smoothly.

4. it should be scale-able

5. we only want it to work if it is visible

This code handles all the above cases and is documented in the code it self.

If you like the slider you can use it in any project you want, commercial or not. All the images and the sound is free to use. It is of course always fun with credit but it's not needed.


  • Order by
Want to leave a comment? Login or Register an account!