# Slider

A panel that slides in from the edge of the screen when its trigger button is clicked (or automatically, using the shared `autoOpen` settings).

## Embed code

```html
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'slider', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click me!'},'width':'767px','height':'100vh','align':'right'}, 'https://eu.forms.app');"></script>
```

The `<button formsappId="...">` element is the visible trigger; the script styles it using the `button` option and opens the slider when it's clicked.

## Options

| Option | Description |
|  --- | --- |
| `overlay` | Background dim color behind the panel, as an `rgba()` value. |
| `button.color` / `button.text` | Styling for the trigger button. |
| `width` / `height` | Size of the sliding panel. `height: '100vh'` fills the full viewport height. |
| `align` | Which edge the panel slides in from: `'left'` or `'right'`. |


The slider also supports the shared `autoOpen` and `openingAnimation` settings described in [Embed options](/embeds/embed-options#shared-button-and-auto-open-settings).

## What's next

- [Embed options](/embeds/embed-options) for the other layouts.
- [Examples](/embeds/examples) for React, Next.js, Vue, and Kotlin.