Documentation

Support

Unity Studio

Open Unity Studio

Unity Studio

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 2 minutesLast updated 2 hours ago
Use this example to understand how to set up sliders and control a material's color.
1

Create 3 sliders in your UI Canvas

  1. Select UI Canvas in the Hierarchy panel.
  2. Right-click the UI Canvas and select UI > Slider to create a new slider.
  3. Right-click your new slider, select Duplicate, and rename the duplicate slider.
  4. 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).
2

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

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

Set up the initial logic in the Logic Editor

  1. Drag a When event listener into the Logic Editor.
  2. Add a Play starts event inside the When node.
  3. 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.
  4. Create the following method:

    Unique name

    Return Type

    Description

    Update_color
    void
    		Handle the slider values and change the color.
4

Create the method node

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

Apply the color to the material

  1. Add the 
    me
    variable, expand it, and select GetComponent > MeshRenderer > Material > SetColor.
  2. Type 
    _BaseColor
    into the 
    name
    socket.
  3. Drag the 
    color
    variable into the second socket.
  4. Move this node into the 
    Update_color
    method.
Example Logic script to change the material's color depending on slider values.

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

6

Make your script listen for slider changes

  1. Drag the 
    Update_color
    method into the When node. This ensures the material starts with the same values as the sliders.
  2. 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.
  3. 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.
  4. 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.

  1. Close the Logic Editor.
7

Connect your Slider references

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

Additional resources