Add styling support

README.md

@@ -12,3 +12,21 @@ Compare Image Slider is a simple interactive component for comparing two images.
 <p align="center">
   <img src="./assets/example.gif" alt="Comparison of two images" />
 </p>
+
+## Styling
+
+Style the component using [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+
+For example:
+
+```html
+<style type="text/css">
+  :root {
+    --handle-color: red;
+  }
+</style>
+```
+
+| Variable         | Description            | Default |
+| ---------------- | ---------------------- | ------- |
+| `--handle-color` | Color of dividing line | `white` |

package.json

@@ -4,6 +4,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "scripts": {
+    "build": "lerna run build"
+  },
   "devDependencies": {
     "@commitlint/cli": "^9.1.1",
     "@commitlint/config-conventional": "^9.1.1",

packages/compare-image-slider/src/compare-image-slider.ts

@@ -60,7 +60,7 @@ export class CompareImageSlider extends LitElement {
         top: 50%;
         margin-left: -19px;
         margin-top: -19px;
-        border: 3px solid white;
+        border: 3px solid var(--handle-color, white);
         border-radius: 19px;
         box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
         cursor: ew-resize;
@@ -75,7 +75,7 @@ export class CompareImageSlider extends LitElement {
         margin-left: -1.5px;
         width: 3px;
         height: 1000px;
-        background: white;
+        background: var(--handle-color, white);
         box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
       }
 
@@ -88,7 +88,7 @@ export class CompareImageSlider extends LitElement {
         margin-left: -1.5px;
         width: 3px;
         height: 1000px;
-        background: white;
+        background: var(--handle-color, white);
         box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
       }
 

packages/compare-image-slider/stories/index.stories.js

@@ -1,4 +1,5 @@
 import { html } from "lit-html";
+import { styleMap } from "lit-html/directives/style-map.js";
 import "../src/compare-image-slider.ts";
 import before from "./images/asite1-1.jpg";
 import after from "./images/asite1-2.jpg";
@@ -13,3 +14,16 @@ export const Default = () => html`
     <img slot="right" width="100%" src=${before} />
   </compare-image-slider>
 `;
+
+export const Styling = () => {
+  const styles = {
+    "--handle-color": "black",
+  };
+
+  return html`
+    <compare-image-slider style=${styleMap(styles)}>
+      <img slot="left" width="100%" src=${after} />
+      <img slot="right" width="100%" src=${before} />
+    </compare-image-slider>
+  `;
+};

packages/react-compare-image-slider/stories/index.stories.tsx

@@ -14,3 +14,15 @@ export const Default = () => (
     <ReactCompareImageSlider leftImage={leftImage} rightImage={rightImage} />
   </div>
 );
+
+export const Styling = () => {
+  const style = {
+    "--handle-color": "red",
+  } as React.CSSProperties;
+
+  return (
+    <div style={style}>
+      <ReactCompareImageSlider leftImage={leftImage} rightImage={rightImage} />
+    </div>
+  );
+};

packages/svelte-compare-image-slider/stories/index.stories.js

@@ -11,3 +11,8 @@ export const Default = () => ({
   Component: Slider,
   props: { leftImage: leftImage, rightImage: rightImage },
 });
+
+export const Styling = () => ({
+  Component: Slider,
+  props: { leftImage: leftImage, rightImage: rightImage, handleColor: "red" },
+});

packages/svelte-compare-image-slider/stories/slider.svelte

@@ -3,12 +3,15 @@
 
   export let leftImage;
   export let rightImage;
+  export let handleColor;
+
+  let style = handleColor ? `--handle-color: ${handleColor};` : null;
 </script>
 
 <style>
 
 </style>
 
-<div>
+<div style={style}>
   <SvelteCompareImageSlider {leftImage} {rightImage} />
 </div>

packages/vue-compare-image-slider/stories/Slider.stories.js

@@ -9,5 +9,10 @@ export default {
 
 export const Default = () => ({
   components: { VueCompareImageSlider },
-  template: `<VueCompareImageSlider leftImage=${before} rightImage=${after} />`,
+  template: `<vue-compare-image-slider leftImage=${before} rightImage=${after} />`,
+});
+
+export const Styling = () => ({
+  components: { VueCompareImageSlider },
+  template: `<VueCompareImageSlider leftImage=${before} rightImage=${after} v-bind:style="{ '--handle-color': 'red' }" />`,
 });