NUI / Components / Input

Slider

ImplementedInput

Slider renders a numeric value input over a min/max range.

Supported as a numeric input component.

Overview

Slider renders a numeric value input over a min/max range.

When to use

Volume.
Brightness.
Sensitivity.
Progress-like settings.
Continuous numeric options.

Children

Does not support children.

Basic syntax

nui

Slider Volume {
    value: 0.75
    min: 0
    max: 1
}

Supported properties

Property	Type	Required	Default	Description
`value`	number	Yes	0	Current value.
`min`	number	No	0	Minimum value.
`max`	number	No	1	Maximum value.
`step`	number	No	Unset	Step amount.
`orientation`	enum	No	horizontal	Slider orientation.
`enabled`	bool	No	true	Whether the slider can be used.
`focusable`	bool	No	true	Whether the slider can receive focus.
`locked`	bool	No	false	Prevents interactive changes.
`fillColor`	color	No	Default	Filled track color.
`backgroundColor`	color	No	Default	Track color.
`thumbColor`	color	No	Default	Thumb color.
`hoveredColor`	color	No	Default	Hover color.
`disabledColor`	color	No	Default	Disabled color.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`opacity`	number	No	1	Render opacity.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

Slider may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. See section 7.

Full syntax example

nui

Slider Volume {
    value: 0.75
    min: 0
    max: 1
    step: 0.05
    orientation: horizontal
    enabled: true
    focusable: true
    locked: false
    fillColor: "#3DDC84"
    backgroundColor: "#202733"
    thumbColor: "#FFFFFF"
    hoveredColor: "#3976CF"
    disabledColor: "#4B5563"
    width: 240
    height: 20
    opacity: 1
    visible: true
}

Limitations

Slider is childless. Use a surrounding Row or Column for labels and value text.