Introduction

Create the Visual Aspect of the GUI

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

   

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

   

3. Click on and add an Edit Text component to the GUI figure. Next, click on 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:

   

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.

   

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

   

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.

   

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

Writing the Code for the GUI

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

   
   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

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

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.