# 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! 💖\ ![](https://1629441543-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSog6QspOPhXbBt8q4vfy%2Fuploads%2FSCkXgyq6OPAcCT4d2xOj%2Fimage.png?alt=media\&token=1812de99-50a2-4c54-8659-b93e1c424757) {% 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