Skip to content
No description, website, or topics provided.
TypeScript CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Initial commit Nov 11, 2018
lib
.gitignore
LICENSE
README.md
package-lock.json
package.json
rollup.config.js
tsconfig.json
tslint.json

README.md

A web component to compare two DOM elements

Usage

npm install --save-dev two-up-element
<two-up>
  <div>This appears on one side</div>
  <div>This appears on the other</div>
</two-up>

Now the user can slide between the two.

API

<two-up class="my-two-up">
  <div>…</div>
  <div>…</div>
</two-up>
<script>
  const twoUp = document.querySelector('.my-two-up');
</script>

Attributes

<two-up legacy-clip-compat></two-up>

Boolean attribute that enables Edge support. The downside is the elements within the <two-up> 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.

<two-up orientation="horizontal"></two-up>

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

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

CSS Custom Properties

.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

TODO.

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.
You can’t perform that action at this time.