# ScrollbarComponent

Class · extends [`Component`](https://api.playcanvas.com/engine/classes/Component.md) · category: User Interface

Source: https://github.com/playcanvas/engine/blob/dfcc50fbbfba2388843041a875ec0ef5d1a586c5/src/framework/components/scrollbar/component.js#L58

The ScrollbarComponent enables an [Entity](https://api.playcanvas.com/engine/classes/Entity.md) to behave like a draggable scrollbar. It is
typically used together with a [ScrollViewComponent](https://api.playcanvas.com/engine/classes/ScrollViewComponent.md) to allow the user to scroll the
contents of a scroll view area.

You should never need to use the ScrollbarComponent constructor directly. To add a
ScrollbarComponent to an [Entity](https://api.playcanvas.com/engine/classes/Entity.md), use [Entity#addComponent](https://api.playcanvas.com/engine/classes/Entity.md#addcomponent). A draggable
scrollbar requires a child handle entity with an input-enabled [ElementComponent](https://api.playcanvas.com/engine/classes/ElementComponent.md),
wired up via the scrollbar's [handleEntity](https://api.playcanvas.com/engine/classes/ScrollbarComponent.md#handleentity) property:

```javascript
// Create a child handle entity that the user can drag
const handle = new Entity();
handle.addComponent('element', {
    type: ELEMENTTYPE_IMAGE,
    useInput: true
});

// Create the scrollbar entity and wire in the handle
const entity = new Entity();
entity.addChild(handle);
entity.addComponent('element', {
    type: ELEMENTTYPE_IMAGE
});
entity.addComponent('scrollbar', {
    orientation: ORIENTATION_VERTICAL,
    value: 0,
    handleSize: 0.5,
    handleEntity: handle
});
```

Once the ScrollbarComponent is added to the entity, you can access it via the
[Entity#scrollbar](https://api.playcanvas.com/engine/classes/Entity.md#scrollbar) property:

```javascript
entity.scrollbar.value = 0.25; // Scroll the bar to 25%

console.log(entity.scrollbar.value); // Get the scroll value and print it
```

## Accessors

### handleEntity

```ts
get handleEntity(): Entity | null
set handleEntity(arg: Entity | null)
```

Gets the entity to be used as the scrollbar handle.

### handleSize

```ts
get handleSize(): number
set handleSize(arg: number)
```

Gets the size of the handle relative to the size of the track.

### orientation

```ts
get orientation(): number
set orientation(arg: number)
```

Gets whether the scrollbar moves horizontally or vertically.

### value

```ts
get value(): number
set value(arg: number)
```

Gets the current position value of the scrollbar.

## Events

### EVENT_SETVALUE

```ts
static EVENT_SETVALUE: string = 'set:value'
```

Fired whenever the scroll value changes. The handler is passed a number representing the
current scroll value.

**Example**

```ts
entity.scrollbar.on('set:value', (value) => {
    console.log(`Scroll value is now ${value}`);
});
```

## Inherited from [Component](https://api.playcanvas.com/engine/classes/Component.md)

- `entity: Entity`
- `system: ComponentSystem`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`