Introduction

Matlab LogoIn this Matlab GUI tutorial, you will learn how to create and use the slider component. Sliders are useful controls for choosing a value in a range of values. Common uses are volume controls, seekers for movie and sound files as well as color pickers. An example of a slider is shown below.

Slider GUI

This tutorial is written for those with little or no experience creating a Matlab GUI (Graphical User Interface). If you’re new to creating GUIs in Matlab, you should visit this tutorial first. Basic knowledge of Matlab is not required, but recommended. Matlab version 2007a is used in writing this tutorial. Both earlier versions and new versions should be compatible as well (as long as it isn’t too outdated). Let’s get started!

Create the Visual Aspect of the GUI

  1. Start up Matlab, and type guide in the command line.

    command prompt

  2. Choose to create a new GUI using the “Blank GUI(Default)” option.

    blank GUI

  3. Click on edit text icon and add an Edit Text component to the GUI figure. Next, click on slider icon and add a Slider component onto the GUI figure.

  4. Double click the Edit Text component to bring up the Property Inspector. Change the String property to 0, and change the Tag property to sliderValue_editText as shown in the figure below:

    Modify edit text component properties

  5. Next, let’s modify the properties of the Slider component. First lets sit the Min property to 0, and the Max property to 100. Next, change the Tag property to slider1.

    Modify slider component properties

  6. Here’s what your figure should look like after you add the components and modify them.

    What your figure should look like

  7. At this point, you also might want to add some Static Text components to specify the min and max values of the slider. You can modify their text by double clicking on the component and changing the String property. It’s not required, but I highly recommend it.

    Add on limits

  8. Save your GUI wherever you please with your desired filename.

Writing the Code for the GUI

Matlab automatically generates an .m file to go along with the figure that you just put together. The .m file is where we attach the appropriate code to the callback of each component. For the purposes of this tutorial, we are primarily concerned only with the callback functions. You don’t have to worry about any of the other function types.

  1. Open up the .m file that was automatically generated when you saved your GUI. In the Matlab editor, click on the Function Icon icon, which will bring up a list of the functions within the .m file. Select slider1_Callback.

    Function Shortcut

    Add the following code to the function:

    %obtains the slider value from the slider component
sliderValue = get(handles.slider1,'Value');
 
%puts the slider value into the edit text component
set(handles.slider_editText,'String', num2str(sliderValue));
 
% Update handles structure
guidata(hObject, handles);

  2. Now, let’s add the following code to the slider_editText_Callback function:

    %get the string for the editText component
sliderValue = get(handles.slider_editText,'String');
 
%convert from string to number if possible, otherwise returns empty
sliderValue = str2num(sliderValue);
 
%if user inputs something is not a number, or if the input is less than 0
%or greater than 100, then the slider value defaults to 0
if (isempty(sliderValue) || sliderValue < 0 || sliderValue > 100)
    set(handles.slider1,'Value',0);
    set(handles.slider_editText,'String','0');
else
    set(handles.slider1,'Value',sliderValue);
end

  3. Save your m-file!

Run and Test the GUI

Now that we’ve completed both the visual and code aspects of the GUI, its time to run the GUI to make sure it works.

  1. From the m-file editor, you can click on the Save and Run Icon icon to save and run the GUI. Alternatively, from the GUIDE editor, you can click on the play button to launch the GUI. The following GUI should appear once you click the icon:

    Slider GUI

  2. Now, try to put in different types of inputs to test the GUI. Any input that is not a number, less than zero, or greater than 100 should default the slider to a value of zero.

  3. And that’s it. Those are the basics of using a Slider component. You can explore the other options that the slider has to offer through the Property Inspector. For instance, you can use the SliderStep property to customize how far you want the slider to move when you press the left and right arrow, or when you click on the scroll bar.

This is the end of the tutorial.

Source files can be downloaded here.