From 992d1620dd395a070acedbedbc25c241ec62d763 Mon Sep 17 00:00:00 2001
From: Guy Willis <guywillis@users.noreply.github.com>
Date: Mon, 3 Apr 2023 08:52:48 +0100
Subject: [PATCH] Fix: Added slider fill and marking styling (fixes #407)
 (#408)

---
 less/plugins/adapt-contrib-slider/slider.less | 50 ++++++++++++++++---
 1 file changed, 43 insertions(+), 7 deletions(-)

diff --git a/less/plugins/adapt-contrib-slider/slider.less b/less/plugins/adapt-contrib-slider/slider.less
index 00343e9c..cc86f050 100644
--- a/less/plugins/adapt-contrib-slider/slider.less
+++ b/less/plugins/adapt-contrib-slider/slider.less
@@ -1,6 +1,10 @@
+@slider-handle-width: 2rem;
+@slider-handle-height: 2rem;
+
+@slider-track-height: .375rem;
+
 .slider {
   // Numbers
-  // --------------------------------------------------
   &__number-container {
     min-height: 2.5rem;
   }
@@ -32,10 +36,7 @@
   }
 
   // Scale
-  // --------------------------------------------------
   &__scale-container {
-    margin-top: @item-margin * 2;
-    margin-bottom: @item-margin * 4;
     background-color: lighten(@black, 75%);
   }
 
@@ -44,8 +45,43 @@
   }
 
   // Slider bar
-  // --------------------------------------------------
-  &__item {
-    margin-bottom: @item-margin * 4;
+  &__item-input-track {
+    background-color: darken(@background-inverted, 20%);
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  &__item-input-fill {
+    background-color: @item-color;
+  }
+
+  // Class to show whether the users selection is in/correct
+  &__widget.show-user-answer.is-correct &__number-selection {
+    background-color: @validation-success;
+    color: @validation-success-inverted;
+  }
+
+  &__widget.show-user-answer.is-correct &__item-input-fill {
+    background-color: @validation-success;
+  }
+
+  &__widget.show-user-answer.is-incorrect &__number-selection {
+    background-color: @validation-error;
+    color: @validation-error-inverted;
+  }
+
+  &__widget.show-user-answer.is-incorrect &__item-input-fill {
+    background-color: @validation-error;
+  }
+
+  &__widget.show-correct-answer.is-correct &__item-input-fill,
+  &__widget.show-correct-answer.is-incorrect &__item-input-fill {
+    background-color: @validation-success;
+  }
+
+  &__widget.show-correct-answer.is-correct &__number-model-answer,
+  &__widget.show-correct-answer.is-incorrect &__number-model-answer {
+    background-color: @validation-success;
+    color: @validation-success-inverted;
   }
 }