# SlideBar

The `SlideBar` control can be used to show data in a `Horizontal` or `Vertical` format. The control features two customizable scroll bars and a panel on the inside that can be used to host an unlimited number of controls.

{% hint style="success" %}
The `ScrollStep` property specifies how many pixels to scroll on each click.
{% endhint %}

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Orientation

The `SlideBar` control can be customized to show a collection of any type of control in a `Horizontal` or `Vertical` format by setting the `Orientation` property.

![Horizontal SlideBar](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-6dc4d2cff84bcc68d5fc2f30284b9fa717275248%2Fimage.png?alt=media)

![Vertical SlideBar](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-78e9131e67b6a82bdee6e8167de4c42e7b0eb58e%2Fimage.png?alt=media)

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                                                                                          |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Class name       | "wisej.web.SlideBar"                                                                                                                                                                 |
| Theme appearance | "slidebar", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                                              |
| Child components | "pane" is the container. "scrollbar-x" and "scrollbar-y" are the horizontal and vertical scrollbars. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                  |