> For the complete documentation index, see [llms.txt](https://deltaclan.gitbook.io/splitter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deltaclan.gitbook.io/splitter/getting-started.md). # Getting Started ## Cloneable: ## Installation Copy the following script and paste it inside **\** tag of your page (*Image 1*). ```javascript ``` {% hint style="info" %} ⚡ Splitter is only **0.61kb** gzipped, so don't worry about page performance! 💖\ ![](/files/PC2fcXwqn8WvntNuOdyG) {% endhint %}

## Webflow Attributes You just need 4 attributes to make this work! \ 1\. `dc-splitter = "splitter"` \ \&#xNAN;*marks the container that will be used as a 'slider'* 2\. `dc-splitter = "before"` \ \&#xNAN;*marks the container that will house the 'before' elements* 3\. `dc-splitter = "after"` \ \&#xNAN;*marks the container that will house the 'after' elements* *4. `dc-splitter = "handle"`* \ *marks the element that will be the 'handle' of the slider, which will be dragged.* ### Splitter Container **Attribute:** `dc-splitter = "splitter"` marks the container that will be used as a splitter component. This will house the `before` ,`after` , `handle` elements.

### Before **Attribute:** `dc-splitter = "before"` marks the container that will house the 'before' elements

### After **Attribute:** `dc-splitter = "after"` marks the container that will house the 'after' elements

### Handle **Attribute:** `dc-splitter = "handle"` marks the element that will be the 'handle' of the slider, which will be dragged.

### Anatomy of a Splitter