https://github.com/GoogleChromeLabs/two-up

https://github.com/GoogleChromeLabs/two-up

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/GoogleChromeLabs/two-up
• Owner: GoogleChromeLabs
• License: apache-2.0
• Created: 2018-10-10T18:16:21.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T21:53:11.000Z (4 months ago)
• Last Synced: 2024-11-06T09:47:40.403Z (3 months ago)
• Language: TypeScript
• Size: 51.8 KB
• Stars: 296
• Watchers: 11
• Forks: 15
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-standalones - `<two-up>`

README

        
# 

A web component to compare two DOM elements

## Usage

```sh

npm install --save-dev two-up-element

```

```html

  
This appears on one side

  
This appears on the other


```

Now the user can slide between the two.

## API

```html

  
…

  
…


  const twoUp = document.querySelector('.my-two-up');

```

### Attributes

```html

```

Boolean attribute that enables Edge support. The downside is the elements within the `` become absolutely positioned. This is because CSS `clip` is used rather than `clip-path`.

This can also be get/set via the boolean property `twoUp.legacyClipCompat`.

```html

```

…or `"vertical"`. The direction the handle moves.

This can also be get/set via the property `twoUp.orientation`.

### CSS Custom Properties

```css

.my-two-up {

  /* Color of the track & thumb */

  --accent-colour: #777;

  /* Or you can set the two independently: */

  --track-color: #777;

  --thumb-color: #777;

  /* Background of the thumb */

  --thumb-background: #fff;

  /* Size of the thumb */

  --thumb-size: 62px;

  /* Thickness of the bar */

  --bar-size: 6px;

  /* Touch-thickness of the bar */

  --bar-touch-size: 30px;

}

```

## Demo

See [examples on CodePen](https://codepen.io/developit/pen/qBdbNLK).

## Files

* `lib/index.ts` - Original TypeScript.

* `dist/two-up.mjs` - JS module. Default exports `TwoUp`.

* `dist/two-up.js` - Plain JS. Exposes `TwoUp` on the global.

* `dist/two-up-min.js` - Minified plain JS. 2.4k gzipped.