Class ColorSlider
A slider component for selecting a color value from a gradient range.
Inheritance
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public sealed class ColorSlider : SliderFloat, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolder, IInputElement<float>, IValidatableElement<float>, INotifyValueChanging<float>, INotifyValueChanged<float>, IFormattable<float>Remarks
The ColorSlider component enables users to select a color value by dragging a thumb along a track that displays a gradient. It extends the SliderFloat component and provides a visual way to pick colors from a defined color range.
The slider displays a gradient track that can be customized to show different color transitions. Users can interact with the thumb to select any color value within the defined gradient range.
Typical use cases include:
- Color opacity/alpha selection
- Color temperature adjustment
- Color intensity control
- Gradient-based value selection
The component supports both mouse/touch input and keyboard navigation for precise color selection.
Examples
Basic color slider with default settings: Creating a basic color slider
<UXML>
<ColorSlider name="opacity-slider" />
</UXML>
<C#>
var slider = new ColorSlider();
container.Add(slider);
Color slider with custom gradient and value display: Creating a color slider with custom appearance and behavior
<UXML>
<ColorSlider
display-value-label="On"
track="On"
show-marks="true"
show-marks-label="true"
color-range="Fixed:[(0,#FF0000FF),(1,#00FF00FF)]+[(0,1),(1,1)]"
/>
</UXML>Color slider for alpha selection: Setting up a slider for opacity/alpha selection
var slider = new ColorSlider();
var gradient = new Gradient();
gradient.SetKeys(
new GradientColorKey[] {
new(Color.white, 0),
new(Color.white, 1)
},
new GradientAlphaKey[] {
new(0, 0),
new(1, 1)
}
);
slider.colorRange = gradient;
slider.displayValueLabel = ValueDisplayMode.Auto;
slider.showMarks = true;
container.Add(slider);Constructors
ColorSlider()
Default constructor.
Declaration
public ColorSlider()Fields
ussClassName
The ColorSlider main styling class.
Declaration
public const string ussClassName = "appui-color-slider"Field Value
| Type | Description |
|---|---|
| string |
Properties
colorRange
The current color range in the track.
Declaration
[CreateProperty]
[UxmlAttribute]
public Gradient colorRange { get; set; }Property Value
| Type | Description |
|---|---|
| Gradient |
colorValue
The currently selected color value.
Declaration
[CreateProperty(ReadOnly = true)]
public Color colorValue { get; }Property Value
| Type | Description |
|---|---|
| Color |
Methods
InvokeValueChangedCallbacks()
Called when the value of the slider has changed via the value property.
Declaration
protected override void InvokeValueChangedCallbacks()Overrides
RefreshUI()
Refresh the UI of the slider. This is usually called during SetValueWithoutNotify(TValue) or directly in a setter of a bound property.
Declaration
protected override void RefreshUI()