Feature: add initial-position attribute

README.md

@@ -47,6 +47,12 @@ This can also be get/set via the boolean property `twoUp.legacyClipCompat`.
 
 This can also be get/set via the property `twoUp.orientation`.
 
+```html
+<two-up initial-position=".25"></two-up>
+```
+
+The initial position of the slider as a decimal value between 0 and 1. 
+
 ### CSS Custom Properties
 
 ```css

dist/two-up.d.ts

@@ -35,6 +35,7 @@ export default class TwoUp extends HTMLElement {
      * Split vertically rather than horizontally.
      */
     orientation: TwoUpOrientation;
+    initialposition: number;
     /**
      * Called when element's child list changes
      */

dist/two-up.js

@@ -219,6 +219,7 @@ var TwoUp = (function () {
 
     const legacyClipCompatAttr = 'legacy-clip-compat';
     const orientationAttr = 'orientation';
+    const initialPositionAttr = 'initial-position';
     /**
      * A split view that the user can adjust. The first child becomes
      * the left-hand side, and the second child becomes the right-hand side.
@@ -234,7 +235,7 @@ var TwoUp = (function () {
             /**
              * The position of the split in %.
              */
-            this._relativePosition = 0.5;
+            this._relativePosition = this.initialposition;
             /**
              * The value of _position when the pointer went down.
              */
@@ -324,6 +325,18 @@ var TwoUp = (function () {
         set orientation(val) {
             this.setAttribute(orientationAttr, val);
         }
+        get initialposition() {
+            const value = this.getAttribute(initialPositionAttr);
+            if (value === null || typeof value === 'undefined')
+                return .5;
+            const perc = parseFloat(value);
+            if (perc === 0)
+                return 0;
+            return perc;
+        }
+        set initialposition(val) {
+            this.setAttribute(initialPositionAttr, val.toString());
+        }
         /**
          * Called when element's child list changes
          */

dist/two-up.mjs

@@ -34,6 +34,7 @@ styleInject(css);
 
 const legacyClipCompatAttr = 'legacy-clip-compat';
 const orientationAttr = 'orientation';
+const initialPositionAttr = 'initial-position';
 /**
  * A split view that the user can adjust. The first child becomes
  * the left-hand side, and the second child becomes the right-hand side.
@@ -49,7 +50,7 @@ class TwoUp extends HTMLElement {
         /**
          * The position of the split in %.
          */
-        this._relativePosition = 0.5;
+        this._relativePosition = this.initialposition;
         /**
          * The value of _position when the pointer went down.
          */
@@ -139,6 +140,18 @@ class TwoUp extends HTMLElement {
     set orientation(val) {
         this.setAttribute(orientationAttr, val);
     }
+    get initialposition() {
+        const value = this.getAttribute(initialPositionAttr);
+        if (value === null || typeof value === 'undefined')
+            return .5;
+        const perc = parseFloat(value);
+        if (perc === 0)
+            return 0;
+        return perc;
+    }
+    set initialposition(val) {
+        this.setAttribute(initialPositionAttr, val.toString());
+    }
     /**
      * Called when element's child list changes
      */

lib/two-up.ts

@@ -3,6 +3,7 @@ import * as styles from './styles.css';
 
 const legacyClipCompatAttr = 'legacy-clip-compat';
 const orientationAttr = 'orientation';
+const initialPositionAttr = 'initial-position';
 
 type TwoUpOrientation = 'horizontal' | 'vertical';
 
@@ -21,7 +22,7 @@ export default class TwoUp extends HTMLElement {
   /**
    * The position of the split in %.
    */
-  private _relativePosition = 0.5;
+  private _relativePosition = this.initialposition;
   /**
    * The value of _position when the pointer went down.
    */
@@ -130,6 +131,19 @@ export default class TwoUp extends HTMLElement {
     this.setAttribute(orientationAttr, val);
   }
 
+  get initialposition(): number {
+    const value = this.getAttribute(initialPositionAttr);
+    if( value === null || typeof value === 'undefined' )
+      return .5;
+    const perc = parseFloat( value );
+    if( perc === 0 ) return 0;
+    return perc;
+  }
+
+  set initialposition(val: number) {
+    this.setAttribute(initialPositionAttr, val.toString() );
+  }
+
   /**
    * Called when element's child list changes
    */