From e991bbed2fab5e325251fc353c517a7c8387c7dd Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <masma@orsted.dk>
Date: Mon, 27 Dec 2021 08:49:42 +0100
Subject: [PATCH 1/2] fix-fast-slider-vertical-css

---
 panel/template/fast/css/fast_bokeh.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/panel/template/fast/css/fast_bokeh.css b/panel/template/fast/css/fast_bokeh.css
index cb01049ee4..f897ccdc8a 100644
--- a/panel/template/fast/css/fast_bokeh.css
+++ b/panel/template/fast/css/fast_bokeh.css
@@ -1521,6 +1521,23 @@ input[type=range]::-moz-range-track {
   cursor: not-allowed;
   opacity: 0.5;
 }
+.bk-root .noUi-vertical {
+  margin-top: 15px;
+  width: calc(var(--track-width) * 1px);
+  background-color: var(--neutral-outline-rest);
+  border-radius: calc(var(--corner-radius) * 1px);
+}
+.bk-root .noUi-target.noUi-vertical {
+    margin-top: 10px;
+}
+.bk-root .noUi-vertical .noUi-handle {
+    border: none;
+    width: 12px;
+    height: 12px;
+    background: var(--neutral-foreground-rest);
+    border-radius: calc(var(--corner-radius) * 1px);
+    box-shadow: none;
+}
 .bk-root .bk-tabs-header {
   display: flex;
   display: -webkit-flex;

From 8606317627cc73a8466b3210b171036a667cec82 Mon Sep 17 00:00:00 2001
From: Marc Skov Madsen <masma@orsted.dk>
Date: Wed, 29 Dec 2021 07:48:48 +0100
Subject: [PATCH 2/2] make fast slider track wider

---
 panel/template/fast/css/fast_bokeh.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/panel/template/fast/css/fast_bokeh.css b/panel/template/fast/css/fast_bokeh.css
index f897ccdc8a..ee1c6c4101 100644
--- a/panel/template/fast/css/fast_bokeh.css
+++ b/panel/template/fast/css/fast_bokeh.css
@@ -1491,10 +1491,13 @@ input[type=range]::-moz-range-track {
   background-position: center;
   border-radius: calc(var(--corner-radius) * 1px);
 }
+.noUi-connect, .noUi-connects {
+  background-color: var(--neutral-outline-rest) !important;
+}
 .bk-root .noUi-horizontal {
   /* height: 2px; */
   margin-top: 15px;
-  height: calc(var(--track-width) * 1px);
+  height: calc(var(--track-width) * 2px);
   background-color: var(--neutral-outline-rest);
   border-radius: calc(var(--corner-radius) * 1px);
 }
@@ -1510,8 +1513,8 @@ input[type=range]::-moz-range-track {
 
 .bk-root .noUi-horizontal .noUi-handle {
     border: none;
-    width: 12px;
-    height: 12px;
+    width: 13px;
+    height: 13px;
     background: var(--neutral-foreground-rest);
     border-radius: calc(var(--corner-radius) * 1px);
     box-shadow: none;
@@ -1523,7 +1526,7 @@ input[type=range]::-moz-range-track {
 }
 .bk-root .noUi-vertical {
   margin-top: 15px;
-  width: calc(var(--track-width) * 1px);
+  width: calc(var(--track-width) * 2px);
   background-color: var(--neutral-outline-rest);
   border-radius: calc(var(--corner-radius) * 1px);
 }
@@ -1532,8 +1535,8 @@ input[type=range]::-moz-range-track {
 }
 .bk-root .noUi-vertical .noUi-handle {
     border: none;
-    width: 12px;
-    height: 12px;
+    width: 13px;
+    height: 13px;
     background: var(--neutral-foreground-rest);
     border-radius: calc(var(--corner-radius) * 1px);
     box-shadow: none;