diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts
index 0c76a5d2..d3cd7d3e 100644
--- a/src/components/Output/custom-els/TwoUp/index.ts
+++ b/src/components/Output/custom-els/TwoUp/index.ts
@@ -68,12 +68,14 @@ export default class TwoUp extends HTMLElement {
   }
 
   connectedCallback() {
-    this._handle.innerHTML = `<div class="${styles.scrubber}">${
-      '<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>'
-    }</div>`;
-
     this._childrenChange();
+
     if (!this._everConnected) {
+      this._handle.innerHTML = `<div class="${styles.scrubber}">${
+        `<svg viewBox="0 0 27 20" fill="currentColor">${
+          '<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'
+        }</svg>`
+      }</div>`;
       this._resetPosition();
       this._everConnected = true;
     }
diff --git a/src/components/Output/custom-els/TwoUp/styles.css b/src/components/Output/custom-els/TwoUp/styles.css
index 2eca1559..eae1e744 100644
--- a/src/components/Output/custom-els/TwoUp/styles.css
+++ b/src/components/Output/custom-els/TwoUp/styles.css
@@ -6,29 +6,41 @@ two-up {
   --track-color: var(--accent-color);
   --thumb-background: #fff;
   --thumb-color: var(--accent-color);
+  --thumb-size: 62px;
+  --bar-size: 6px;
+  --bar-touch-size: 30px;
 }
 
 two-up > * {
-  /* Overlay all children on top of each other, and let
-  two-up's layout contain all of them. */
+  /* Overlay all children on top of each other, and let two-up's layout contain all of them. */
   grid-area: 1/1;
 }
 
-two-up[legacy-clip-compat] > :not(.twoUpHandle) {
+two-up[legacy-clip-compat] > :not(.two-up-handle) {
+  /* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
+  elements to be positioned absolutely */
   position: absolute;
 }
 
-.twoUpHandle {
+.two-up-handle {
   touch-action: none;
   position: relative;
-  width: 10px;
-  background: var(--track-color);
+  width: var(--bar-touch-size);
   transform: translateX(var(--split-point)) translateX(-50%);
-  box-shadow: inset 4px 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
   will-change: transform;
   cursor: ew-resize;
 }
 
+.two-up-handle::before {
+  content: '';
+  display: block;
+  height: 100%;
+  width: var(--bar-size);
+  margin: 0 auto;
+  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
+  background: var(--track-color);
+}
+
 .scrubber {
   display: flex;
   position: absolute;
@@ -36,51 +48,55 @@ two-up[legacy-clip-compat] > :not(.twoUpHandle) {
   left: 50%;
   transform-origin: 50% 50%;
   transform: translate(-50%, -50%);
-  width: 62px;
-  height: 56px;
+  width: var(--thumb-size);
+  height: calc(var(--thumb-size) * 0.9);
   background: var(--thumb-background);
   border: 1px solid rgba(0,0,0,0.2);
-  border-radius: 5px;
+  border-radius: calc(var(--thumb-size) * 0.08);
   box-shadow: 0 1px 4px rgba(0,0,0,0.1);
   color: var(--thumb-color);
 }
+
 .scrubber svg {
   flex: 1;
-  margin: 0 10px;
+  margin: 0 25%;
 }
 
-two-up[orientation='vertical'] .twoUpHandle {
+two-up[orientation='vertical'] .two-up-handle {
   width: auto;
-  height: 7px;
+  height: var(--bar-touch-size);
   transform: translateY(var(--split-point)) translateY(-50%);
-  box-shadow: inset 0 3px 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
   cursor: ns-resize;
 }
 
+two-up[orientation='vertical'] .two-up-handle::before {
+  width: auto;
+  height: var(--bar-size);
+  box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.4);
+  margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
+}
+
 two-up[orientation='vertical'] .scrubber {
-  width: 46px;
-  height: 40px;
-  font-size: 18px;
   box-shadow: 1px 0 4px rgba(0,0,0,0.1);
   transform: translate(-50%, -50%) rotate(-90deg);
 }
 
-two-up > :nth-child(1):not(.twoUpHandle) {
+two-up > :nth-child(1):not(.two-up-handle) {
   -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
   clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
 }
 
-two-up > :nth-child(2):not(.twoUpHandle) {
+two-up > :nth-child(2):not(.two-up-handle) {
   -webkit-clip-path: inset(0 0 0 var(--split-point));
   clip-path: inset(0 0 0 var(--split-point));
 }
 
-two-up[orientation='vertical'] > :nth-child(1):not(.twoUpHandle) {
+two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
   -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
   clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
 }
 
-two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) {
+two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
   -webkit-clip-path: inset(var(--split-point) 0 0 0);
   clip-path: inset(var(--split-point) 0 0 0);
 }
@@ -90,19 +106,19 @@ two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) {
   It performs way better in Safari.
  */
 @supports not ((clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))) {
-  two-up[legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) {
+  two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
     clip: rect(auto var(--split-point) auto auto);
   }
 
-  two-up[legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
+  two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
     clip: rect(auto auto auto var(--split-point));
   }
 
-  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) {
+  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
     clip: rect(auto auto var(--split-point) auto);
   }
 
-  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
+  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
     clip: rect(var(--split-point) auto auto auto);
   }
 }