Skip to main content

Slider

A component for selecting a numeric value from a range of values with an optional increment. These are seen in some number-valued properties in the built-in Properties widget, as well as in various built-in plugins such as the Terrain Editor.

Dark Light
Dark Light

As with other components in this library, this is a controlled component. You should pass a value to the Value prop representing the current value, as well as a callback to the OnChanged prop which will be run when the user changes the value via dragging or clicking on the slider.

In addition to these, you must also provide a Min and a Max prop, which together define the range of the slider. Optionally, a Step prop can be provided, which defines the increment of the slider. This defaults to 0, which allows any value in the range. For a complete example: 

local function MyComponent()
	local value, setValue = React.useState(1)
	return React.createElement(StudioComponents.Slider, {
		Value = value,
		OnChanged = setValue,
		Min = 0,
		Max = 10,
		Step = 1,
	})
end

Optionally, an OnCompleted callback prop can be provided. This will be called with the latest value of the Slider when sliding is finished. It is also called if, while sliding is in progress, the component becomes Disabled via props or is unmounted.

Two further props can optionally be provided:

  1. Border determines whether a border is drawn around the component. This is useful for giving visual feedback when the slider is hovered or selected.
  2. Background determines whether the component has a visible background. If this is value is missing or set to false, any border will also be hidden.

Both of these props default to true.

By default, the height of sliders is equal to the value found in Constants.DefaultSliderHeight. While this can be overriden by props, in order to keep inputs accessible it is not recommended to make the component any smaller than this.

Types​

Props​

Component Props
</>
interface Props {
Value: number
OnChanged: ((newValue: number) → ())?
OnCompleted: ((newValue: number) → ())?
Min: number
Max: number
Step: number?
Border: boolean?
Background: boolean?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Value",
                    "lua_type": "number",
                    "desc": ""
                },
                {
                    "name": "OnChanged",
                    "lua_type": "((newValue: number) -> ())?",
                    "desc": ""
                },
                {
                    "name": "OnCompleted",
                    "lua_type": "((newValue: number) -> ())?",
                    "desc": ""
                },
                {
                    "name": "Min",
                    "lua_type": "number",
                    "desc": ""
                },
                {
                    "name": "Max",
                    "lua_type": "number",
                    "desc": ""
                },
                {
                    "name": "Step",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "Border",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "Background",
                    "lua_type": "boolean?",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 74,
                "path": "src/Components/Slider.luau"
            }
        }
    ],
    "name": "Slider",
    "desc": "A component for selecting a numeric value from a range of values with an optional increment.\nThese are seen in some number-valued properties in the built-in Properties widget, as well as in\nvarious built-in plugins such as the Terrain Editor.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/slider/dark.png) | ![Light](/StudioComponents/components/slider/light.png) |\n\nAs with other components in this library, this is a controlled component. You should pass a\nvalue to the `Value` prop representing the current value, as well as a callback to the `OnChanged`\nprop which will be run when the user changes the value via dragging or clicking on the slider.\n\nIn addition to these, you must also provide a `Min` and a `Max` prop, which together define the\nrange of the slider. Optionally, a `Step` prop can be provided, which defines the increment of\nthe slider. This defaults to 0, which allows any value in the range. For a complete example:\n\n```lua\nlocal function MyComponent()\n\tlocal value, setValue = React.useState(1)\n\treturn React.createElement(StudioComponents.Slider, {\n\t\tValue = value,\n\t\tOnChanged = setValue,\n\t\tMin = 0,\n\t\tMax = 10,\n\t\tStep = 1,\n\t})\nend\n```\n\nOptionally, an `OnCompleted` callback prop can be provided. This will be called with the latest\nvalue of the Slider when sliding is finished. It is also called if, while sliding is in progress,\nthe component becomes Disabled via props or is unmounted.\n\nTwo further props can optionally be provided:\n1. `Border` determines whether a border is drawn around the component.\nThis is useful for giving visual feedback when the slider is hovered or selected. \n2. `Background` determines whether the component has a visible background.\nIf this is value is missing or set to `false`, any border will also be hidden.\n\nBoth of these props default to `true`.\n\nBy default, the height of sliders is equal to the value found in [Constants.DefaultSliderHeight].\nWhile this can be overriden by props, in order to keep inputs accessible it is not recommended \nto make the component any smaller than this.",
    "source": {
        "line": 49,
        "path": "src/Components/Slider.luau"
    }
}