Use a basic slider for single-value inputs. These sliders appear in circumstances where a user needs to assign a value within a range, with the position of the handle directly reflecting the assigned value.
Allows the user to specify a range between a minimum and a maximum.
Single numeric fields:
When paired with a basic slider, numeric fields are positioned to the right of the slider.
Min-max numeric fields:
When paired with a min-max slider, numeric fields are positioned on both sides of the slider, to represent the minimum and maximum values.
A slider’s label should clearly indicate the nature of the value being set. The label should always appear to the left of the component.
Handles appear as a circular control above the slider groove. The handle’s position represents the current value for the slider; the farther to the right of the groove, the higher the value. A slider’s handle cannot pass beyond the edges of its groove, which is bookended with the minimum and maximum values at either end.
Movement of the slider’s handle changes the value. On a typical horizontal slider, both the left and right ends of the slider represent the two extreme values allowed by the control.
The cursor’s glyph will adapt depending on which portion of the slider it’s positioned above; when the cursor hovers over the slider’s label it automatically converts to a “scrub” glyph, while it will show a text cursor if positioned above an attached numeric field.
Sliders are an adjustment-based control element, where the position of the control dictates the current value assigned to its subject.
A slider can contain the following elements:
2. Slider handle (also called slider thumb)
3. Slider groove (also called slider track)
4. Numeric field
A slider is still active when in its default state; because a slider represents a value it can be considered active unless disabled and will always show the current value assigned (even if interactions with the component are not permitted).
When in the focused state the label, control, and attached field will all be highlighted. Pressing the tab key moves the focus state to the next label/property, which is typically down. The arrow keys can be used to adjust the value left and right (to decrease and increase respectively).
A disabled slider will be unresponsive to direct user actions but may still display the value associated with the slider and, on occasion, be manipulated by other means (in code, or as a result of a scene progressing. Regardless of whether or not the slider control changes position the slider is considered to be in a “disabled” state when it can not directly receive user input.
Go to Window > UI Toolkit > Samples, to view code samples in C# / USS / UXML.