Demo

Go to the Home page.

Usage

Include via CDN(e.g. unpkg) or Download a copy

<script src="https://unpkg.com/@9am/before-after/dist/index.min.js"></script>

<before-after>
    <section slot="before">
        <h1>BEFORE</h1>
    </section>
    <section slot="after">
        <h1>AFTER</h1>
    </section>
</before-after>

<script type="module">
    import 'https://unpkg.com/@9am/before-after/dist/index.es.js';
</script>

npm install @9am/before-after

Documentation

Attributes

| Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | varient | linear | radial | conic repeating-linear | repeating-radial | repeating-conic | linear | The varient. | | orient | horizontal | vertical | horizontal | The orientation. | | value | number | 50 | The position of the thumb bar. (0-100) |

CSS Properties

| Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | --position | css gradient params before <color-stop-list> | linear: to left radial: circle at center conic: at center | The control for how the mask behaves. | | --repeat | number | 6 | The repeat times for repeating- varients. | | --thumb-size | css size | 1px | The thumb size. | | --thumb-color | css color | white | The thumb color. |

License

MIT