Our most comprehensive learning experience

Pathway

Collections of tutorials and quizzes organized to teach a specific skill

Course

Tutorial

Create a 2D Platformer

Build a VR Experience

Make an AR App

Interactive Simulations

Editor Essentials

For Educators

All content in this course uses:

Add a music toggle and volume slider to your UI and wire them up with the Event System for simple control.

Add toggles and sliders

As a UI becomes complex, you will inevitably need to implement toggles and sliders, which each allow the user a unique way to interact with an application. In this tutorial, you will add a toggle that allows the user to turn music on and off and a slider that allows them to control the volume. 

By the end of this tutorial, you'll be able to:

Identify use cases for Sliders and Toggles in UI design.

Implement simple toggle functionality by using the Event System.

Implement simple slider functionality by using the Event System.

You currently have an empty settings menu. The obvious next step is to fill it with settings.

In this tutorial, you will add a toggle to turn music on and off and a slider to control volume. If you want, you can add additional settings too.

By the end of this tutorial, your project might look like this:

Overview

In the previous tutorial, you added functionality to buttons. Buttons are incredibly versatile UI elements. 

Another very useful UI element is the toggle, which allows users to turn things on or off. 

Let’s add a toggle to allow users to turn music on or off in the scene. 

First, let’s bring up the settings menu and hide the title for easier editing. 

 Activate the Settings Menu object and hide all other UI elements, then make sure you’re in a good 2D perspective to edit the Canvas in the Scene view. 

 Right-click on the Settings Menu object and select 

, then rename it “Music Toggle” in the Hierarchy. This will add a checkbox with the word Toggle next to it, anchored in the center of your menu. 

By default, the Toggle label uses Unity’s old text system rather than the more robust and optimized TextMeshPro. Let’s replace that simple text with TextMeshPro.

 object, then right-click on Music Toggle and select 

This will create a default New Text object, which is far too large and out of position. 

Edit the text label to match the rest of your app and reposition it appropriately for the checkbox, then reposition the parent Music Toggle object where you’d like in the menu.  

The toggle now looks great, but still doesn’t do anything if you select it. Let’s make it functional. 

Add a music toggle setting

Before you can toggle the music on and off, you need to add some music into the scene!

. This is basically like adding a speaker into the scene. 

  In the Audio Source component, for the 

 property, use the object picker to select music for your project. 

You can preview the music by playing your project. We have provided you with a few classical options, but you could also download and import other songs too!

  In the Audio Source component, set the 

 property to a value between 0.25-0.50. We don’t want the music to be too loud or startling for people.

Add music to the scene

Now that you have music playing, let’s add the ability to toggle it on and off. 

Just like with the Button component, there is a special Unity Event that is called whenever the toggle is turned on or off by the user.

  Select the Music Toggle object and locate the 

event at the bottom of the Toggle component.  

. This Boolean parameter means that you can make different things happen if that Boolean is true or false. In this case, we want the music to play when it’s true (toggle selected) and stop when it’s false (toggle deselected):

Toggle on → OnValueChanged(true) → play music

Toggle off → OnValueChanged(false) → stop music 

button within the On Value Changed Event to add a new action to the list, then assign the 

 GameObject. This will allow you to call a function from the 

 Using the action dropdown, which is currently set to 

As the toggle is set to true or false, so is the 

 property of the Audio Source. Now, when the user enables and disables the toggle, it will also enable and disable the Audio Source component, turning the music on and off.

Try testing your app. Using the toggle should now stop and play your music. 

Some people might also want to adjust the volume of the music – let’s add that functionality next. 

Make the music toggle functional

To control the volume, we’ll use a new UI element: 

. Sliders are very useful and allow more precise control over settings like volume, brightness, text size, price ranges, and more. 

, then rename it “Volume Slider” in the Hierarchy.

 tool in the Scene view to resize and reposition the slider appropriately on the menu. 

 GameObject. Then edit the style and position of the text so that it says Volume next to the slider.  

Add a volume slider

With the slider now looking good, we just need to make it functional. When the slider is adjusted by the user, the volume of the Audio Source should change dynamically along with it.

  Select the Volume Slider object and locate the 

Add a new action to the list, then assign the 

 instead of the Boolean you used with the toggle. A float is a number with decimal values. The slider will set the volume to a decimal value between 0 and 1, depending on where the slider handle sits. 

If you test your app now, you’ll notice something strange. The music will be playing at regular volume, but the slider will still be set all the way to the left, since that is its default position. At the start of the scene, the slider position should match the current volume.

In the Slider component, set the default 

 property to match the starting volume of your Audio Source. This will move the slider handle in your scene as well.

Now your slider should function as expected!

Make the volume slider functional

You now understand how to create new UI elements and link them up with simple functionality. 

Try adding some new settings to your menu to give the user more control over their experience!

You could add toggles to view or hide certain objects, sliders to control the brightness of lights, buttons to switch between night and day, or any other fun feature you can think of!

Experiment by assigning objects to a UnityEvent and browsing through the functions. This will give you some ideas for what’s possible.  

Explore: Add new UI elements

Your settings menu is complete! Don’t forget to reactivate the title screen elements and hide the settings menu by default. 

In the next challenge tutorial, you’ll learn about an entirely different Canvas mode, where your UI can appear to be part of the physical world of your scene. This opens all kinds of interesting opportunities with UI design in 3D worlds!

Next steps

Create simple functional user interfaces, including images, text, buttons, toggles, and sliders.  

Beginner User Interface

ElizabethMidgley

Crear interfaces de usuario operativas y simples, incluidas imágenes, texto, botones, alternadores y deslizadores.  

Interfaz de usuario para principiantes

Deleted User

画像、テキスト、ボタン、トグル、スライダーなど、シンプルな機能のユーザーインターフェースを作成します。

ユーザーインターフェース入門

HISAO SETOGUCHI

Technical Lead Writer

Designed for post-secondary and K-12 educators at accredited academic institutions teaching Unity in the classroom, the Unity Educator plan provides you with free access to the same real-time 3D development tools used by professionals to support your students.

Included in this plan are Unity Pro, cloud-based collaboration, cloud build, free Unity assets, and much more!

Creative Core Pathway Facilitator Kit.zip

Creative Core Pathway Facilitator Kit

Unity Educator Hub

The Unity Creative Core Pathway Facilitator Kit includes everything you need to successfully bring this Pathway into your learning context including a syllabus, complete lesson plans, standards alignment, teacher preparation guide, and more. 

Games

Film

Automotive

Understand the role of the EventSystem GameObject in developing interactive UIs

Implement simple button functionality by using the Event System

Implement simple toggle functionality by using the Event System

Implement simple slider functionality by using the Event System

Identify use cases for essential interaction components: Button, Slider, Toggle

Create and configure interactive UI components such as buttons, toggles, and sliders, in order to implement simple UI functionality

Entender el papel del GameObject EventSystem en el desarrollo de interfaces de usuario interactivas.

Implementar la función de botones simples mediante el Sistema de eventos.

Implementar una función simple de alternador mediante el Sistema de eventos.

Implementar una función simple de deslizador mediante el Sistema de eventos.

Identificar casos de uso de componentes de interacción esenciales: botón, deslizador, alternador.

¿Cómo crear y configurar componentes de UI interactivos, como botones, alternadores y deslizadores, para implementar funciones simples de UI?

インタラクティブな UI の作成における EventSystem ゲームオブジェクトの役割について理解する

Event System を利用した簡単なボタン機能の実装

Event System を利用した簡単なトグル機能の実装

Event System を使用した簡単なスライダー機能の実装

重要なインタラクションコンポーネントのユースケースを特定する：ボタン、スライダー、トグル

Unity Version 6.3