> For the complete documentation index, see [llms.txt](https://smartui-docs.pixelperfectstudio.mx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smartui-docs.pixelperfectstudio.mx/framework-addons/scroll-bar.md). # Scroll Bar SmartUI Scroll-Bar Behavior operation and ACEs.

Scrollbars are a convenient component for managing user input of values within a fixed range. These values can be either negative or positive; the component is flexible enough to handle the value range where it operates. Scrollbars can also function as sliders, depending on the components you add when composing it. This is a composite and complex object, as it combines several SmartUI components to provide its functionality. It directly inherits its main features from a [Container](/framework-addons/container-behavior.md). A scroll-bar is composed of four parts: 1. The

**scroll-bar** itself, which acts as a container for the other objects and provides the ACEs to operate it. 2. A

**slider**, an object using the [Button Behavior](/framework-addons/button-behavior.md) that must be a child of the scrollbar. 3. Two

**scroll buttons**, also using the [Button Behavior](/framework-addons/button-behavior.md), which increase or decrease the value of the bar by the assigned step size.

{% hint style="warning" %} **The scrollbar's origin must always be on the left side.** The slider's position is adjusted from the origin, considering the scrollbar's angle, so you can rotate the bar at any angle to fit your design. {% endhint %} In the image above, we have a bar at the center that uses the Scrollbar behavior, a slider button (red square) that uses the Button behavior, and two scroll buttons to increase or decrease the value within the range, also using the Button behavior. All of these must be children of the scrollbar container. {% hint style="info" %} The scroll buttons can be placed anywhere in the layout to fit your needs, as long as they are children of the scrollbar component. {% endhint %} To compose the scrollbar in the properties, use the component's name property. Under the scrollbar object hierarchy, there must be only one component that matches the name assigned to its functions.

The names of the child components must exactly match the ones assigned to compose the scrollbar.

{% hint style="info" %} Scroll buttons will always change the value by the number set in the ***Step Size*** field, regardless of whether the bar operates with floating values or integer values. {% endhint %} {% hint style="warning" %} Please be aware that all the children of the **component must have change propagation enabled for all attributes**: visible, opacity, x, y, width, height, etc. Otherwise, you will need to manually control the children's attributes. {% endhint %}

Properties transformation should be enabled to render children correctly.

Download

## :tv:Basic Setup - Tutorial Video {% embed url="" %} ## Properties


Property	Description
`Enabled`	Enables or Disables the Scroll Bar. Value can still be set and it will change the Scroll Bar, but animations won't be triggered. You can use the IsEnabled condition to affect the look and feel when needed.
`Focusable`	Marks if the component can have the focus.
`Index`	Index of the element within a container. Used for focusing the elements in the sequence order.
`Invisible Component`	Turns the component opacity to 0 while rendering it to allow invisible interactions.
`Automatic-Color`	Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check.
`Name`	Unique name string for identifying the Scroll Bar
`Step Size`	Fixed value increment for stepping-mode sliders.
`Value`	Numeric value representing the current progress.
`Min.Value`	Minimum value.
`Max.Value`	Maximum value
`Result Mode`	Discrete mode handles floating values with discrete selection. Step mode handles integer values with precise location for the slider button.
`Inc.Button`	Increment button name
`Dec.Button`	Decrement button name
`Slider Button`	Slider button name

Smart UI Scroll Bar Smart UI Scroll Bar behavior handles Scroll Bar UI components. Handles value ranges within a limit. ## Actions *** ### `Set Enabled` Disable/Enable the scroll bar | **Parameter** | **Description** | | ------------- | ---------------- | | `Enabled` | Enabled/Disabled | ### `Set Focus` Sets the focus on the component, removing the focus from all the components within the same container. ### `Set Focusable` Sets the component to be able to receive the focus | **Parameter** | **Description** | | ------------- | ------------------------------------------ | | `Focusable` | Flag to allow the component to be focused. | ### `Set Max` Sets the maximum value of the Scroll Bar. | **Parameter** | **Description** | | ------------- | --------------- | | `Value` | Maximum value. | ### `Set Min` Sets the minimum value of the Scroll Bar. | **Parameter** | **Description** | | ------------- | --------------- | | `Value` | Minimum value. | ### `Set Name` Sets the name of the component. | **Parameter** | **Description** | | ------------- | --------------------- | | `Name` | Name of the component | ### `Set Value` Sets the current value of the Scroll Bar. If the value is below 0 or above the maximum, it will be clamped. | **Parameter** | **Description** | | ------------- | ----------------------------------------------- | | `Value` | Numeric value representing the current progress | ## Conditions *** ### `Compare Value` Compares the value of the Scroll Bar. | **Parameter** | **Description** | | ------------- | ----------------------------- | | `Comparison` | How to compare the variable | | `Value` | Value to compare the variable | ### `Compare Name` Returns true if the Scroll Bar components name equals the parameter | **Parameter** | **Description** | | ------------- | ------------------------------------------ | | `Name` | Name to compare with the component picked. | ### `Is Dragging` True when the slider scroll bar is being dragged to set a value. Use DragValue expression to retrieve the value. ### `Is Enabled` Returns true if the Scroll Bar is enabled ### `undefined` undefined ### `Is Focused` Returns true if the scroll bar has the focus ### `On Focus` Triggered when the scroll bar gets the focus ### `On Focus Lost` Triggered when the scroll bar loses focus ### `On Value Change` Triggered when the Scroll Bar value changes. When dragging the slider, value will be set only when it's released. ## Expressions *** ### `AnimatedProgress` Percentage representing the AnimatedValue from the Max value allowed to be set for the Scroll Bar. This value is set only when the animation is running ### `AnimatedValue` Current animated value. This value is set only when the animation is running. E.G. If you are changing the value from 0 to 10, it will contain all the step values to reach the 10, as if it was counting. ### `Name` Component name ### `DragValue` Scroll Bar value while being dragged. Value becomes final after the user releases the slider. Always use Value expression to retrieve the correct value. ### `Max` Scroll Bar Maximum value. ### `Min` Scroll Bar Minimum value. ### `Progress` Scroll Bar progress value in percentage. ### `Value` Scroll Bar current value. **(c) Pixel Perfect Studio 2024**