UnityRef is currently in early development. Some features may be incomplete and/or not functioning.

UNITYREF

Your Pit Stop For Solving ANYTHING in Unity

ui

[UI Toolkit] Customize Slider Fill Color via USS Selectors

Solution

ussui toolkitstylingLayout

Unity 2021.3.x - Unity 6.3.x

Published Fri, Mar 27

Author Profile Photo

Reviewed by _architect

Chief Editor

80 posts
Issue

 The Slider component in UI Toolkit allows developers to enable a fill display, but the UI Builder inspector does not expose properties to modify the color of this fill. This limitation forces developers to use the default styling, which often conflicts with the visual theme of their project.

Quick-Fix

Target the internal .unity-base-slider__fill selector within a USS stylesheet to override the default background color and visual properties of the slider fill.

Expand Analysis

To customize the fill appearance of your Slider, you must target the specific internal class used by the UI Toolkit framework within a stylesheet.

  1. Create a new USS file in your Project window or open an existing one.
  2. Define a new rule using the .unity-base-slider__fill selector.
  3. Set the background-color property within this rule to your preferred color.
  4. Apply the USS stylesheet to your UIDocument or directly to your Slider element in the UI Builder.
  5. If you only want to style a specific element, add a custom class (e.g., .my-health-bar) to your Slider and use a nested selector: .my-health-bar .unity-base-slider__fill.

Additional Tips

  • You can also modify the .unity-base-slider__fill to include a border-radius for rounded progress bars.
  • To change the empty part of the slider, target the .unity-base-slider__tracker selector.
  • Use the Panel Debugger (Window > UI Toolkit > Debugger) to inspect the runtime hierarchy and confirm the .unity-base-slider__fill element is receiving your styles.

Copy 



/* Example USS File */

/* Target all sliders in the document */
.unity-base-slider__fill {
    background-color: #FF0000;
    border-radius: 4px;
}

/* Target a specific slider class */
.custom-xp-bar .unity-base-slider__fill {
    background-color: #00FF00;
}

Related Posts Haven't quite found a solution to your problem? We think these posts might help you.
[UI Toolkit] Fix Overriding Dropdown Item Hover Styles[UI Toolkit] Master Percentage Binding for Responsive Layouts[UI Toolkit] Missing border-style Property Support in USS

Content inspired by a Unity discussion post.