UI Sliders not interactable

Questions & Answers
1

Hi

I have a slider in my scene that it supposed to turn the volume up and down, but I can not interact with the slider at all.
The interactable checkbox is ticked so it should work, but it doesn’t.

Does anyone have an idea why this is happening and how I can fix it?

2

Well for everyone else having the same problem.

Check the following things:

  • Is any other UI Element blocking my slider/button?
  • Does any parent element have a canvas group with interactable false?
  • Are there any hidden (Alpha 0) Elements blocking my slider/button?
  • Is there an Event System in the Scene?
  • Does the button work in a newly created Canvas?

Working through this list while keeping in mind that, UI Elements inside Canvas, Panel, etc. are ordered from bottom to top (the one at the bottom gets renderer in front of everything else), should solve most of the problems.

3

Had this problem. Had to change the Canvas to Screen Overlay instead of Camera space.

I don’t know if it’s because the original prefab was created in that space, or if it’s universal. Not going to test just this moment.

4

The most common reason why a slider or a button isn’t intractable is because there’s a overlapping UI element with “Raycast Target” activated over it. By default, that option is always activated for every new visible UI element added in the scene. (Only copied element with the option ticked Off aren’t created with it On.)

For example, you might use a full screen 100% transparent UI image for you screen transition that allow you to turn the screen white, black or any color of your choice when switching screen. If that has the (as it is by default) “Raycast Target” activated, no UI element with either lower priority or behind it (varying the type of canvas) will be working from the mouse interaction (as it will block its raycast calls).

Sometimes, it can also be the type of font you’re using. In an option menu for example, you might put thing in a dynamic way that allow it to adjust itself for such thing as different orientation (smartphone/tablets) and different screen ratios (PC/Consoles). At some point, maybe you got a text UI element that with “Raycast Target” on that is hovering above the slider, but as the font is slightly off to the bottom of its “space”, you only will see it by looking at the Scene while selecting the Text element (with its box size).

If you’re working on a flat canvas (anything else than “WorldSpace”), the Pos Z of your UI element might be off and something transparent might be over your slider.

Also, I would suggest, if you have overlapping menus option (like the option menu coming over a main menu) to switch the “interactable” value of all UI elements with such thing depending on the focused menu. (It requires some works, but it’s working really well once well implemented.)