Use sliders to change a material's color

Set up 3 sliders to control the red, green, and blue components of a material's color.

Read time 3 minutes

Last updated 7 months ago

Use this example to understand how to set up sliders and control a material's color.

Create 3 sliders in your UI Canvas

Select UI Canvas in the Hierarchy panel.
Right-click the UI Canvas and select UI > Slider to create a new slider.
Right-click your new slider, select Duplicate, and rename the duplicate slider.
Repeat step 3 so you have 3 sliders. Each slider will control one of the elements of the material's color (red, green, or blue).

Add a Cube object to your scene and assign a new Logic script

In the Hierarchy panel, select Add (+) > Primitives > Cube.
Select your new cube. The Inspector window shows.
From the Inspector panel, select Add Component.
In the New Logic field, give a name to your new script.
Select Create and Edit. The Logic Editor opens.

Set up the initial logic in the Logic Editor

Drag a When event listener into the Logic Editor.
Add a Play starts event inside the When node.

Create the following variables:

Unique name	Type	Description
`red_slider`	`Slider`	Control the red element of the material's color.
`green_slider`	`Slider`	Control the green element of the material's color.
`blue_slider`	`Slider`	Control the blue element of the material's color.
`color`	`Color`	Store the changing color.

Create the following method:
Unique name
Return Type
Description
Update_color
void
Handle the slider values and change the color.

Unique name	Return Type	Description
`Update_color`	`void`	Handle the slider values and change the color.

Create the method node

Drag the
```
Update_color
```
method into the Logic Editor to create an Update_color node.
On the
```
Update_color
```
node, set wait to false (do this for every
```
Update_color
```
node you add).
Drag a Set variable value node inside the
```
Update_color
```
method.
Add the color > r node to the first socket and red_slider > value to the second.
Repeat for color > g with green_slider > value, and for color > b with blue_slider > value.

Apply the color to the material

Add the
```
me
```
variable, expand it, and select GetComponent > MeshRenderer > Material > SetColor.
Type
```
_BaseColor
```
into the
```
name
```
socket.
Drag the
```
color
```
variable into the second socket.
Move this node into the
```
Update_color
```
method.

Example Logic script to change the material's color depending on slider values.

Make your script listen for slider changes

Drag the
```
Update_color
```
method into the When node. This ensures the material starts with the same values as the sliders.
Add another
```
red_slider
```
variable in the script, expand it, and select onValueChanged > AddListener. This node detects any time the user interacts with this slider.
Drag another
```
Update_color
```
method into the red_slider > onValueChanged > AddListener node. When the node detects user interaction, this action updates the color with the slider's value.
Repeat steps 2 and 3 for
```
green_slider
```
and
```
blue_slider
```
.

Example Logic script that shows how to detect changes of sliders. — Example Logic script that shows how to detect slider changes.

Close the Logic Editor.

Connect your Slider references

In the Hierarchy panel, select the GameObject with the attached Logic script.
Drag your sliders from the Hierarchy panel into the red_slider, green_slider, and blue_slider variable references in your script component.

Documentation

Development

User Acquisition

Monetization

Industry