Merge pull request #190 from adaptlearning/issue/937-slider

issue #937

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "adapt-contrib-vanilla",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "framework": "^2.0.0",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-vanilla",
   "issues": "https://github.com/adaptlearning/adapt_framework/issues/new?title=contrib-vanilla%3A%20please%20enter%20a%20brief%20summary%20of%20the%20issue%20here&body=please%20provide%20a%20full%20description%20of%20the%20problem,%20including%20steps%20on%20how%20to%20replicate,%20what%20browser(s)/device(s)%20the%20problem%20occurs%20on%20and,%20where%20helpful,%20screenshots.",

less/src/slider.less

@@ -1,54 +1,74 @@
 .slider-component {
-    .slider-scaler {
-        background-color: lighten(@item-body-text-color, 20%);
-    }
-
-    .slider-sliderange {
-        background-color: lighten(@item-body-text-color, 20%);
-        box-shadow: none;
-    }
 
+    .slider-scaler-wrapper {
 
-    .slider-handle {
-        background-color: @item-text-color;
-        color: @item-color;
-        .no-touch & {
-            &:hover {
-                background-color:@item-color-hover;
-            }
+        .slider-scaler {
+          background-color: @item-body-text-color;
         }
     }
 
+    .slider-model-answer,
     .slider-scale-marker {
-        box-shadow: none;
+        color: @item-text-color;
+        background-color: @item-color;
     }
 
     .slider-line {
-        background-color: lighten(@item-body-text-color, 20%);
-        height: 7px;
-        top: 0px;
+        background-color: @item-body-text-color;
     }
+}
 
-    .slider-outer-bar {
-        background-color: none;
-        border: none;
-        border-top: none;
-        border-bottom: none;
-        border-radius: none;
-        box-shadow: none;
-    }
+.slider-widget {
+    .slider-holder {
+        .rangeslider__handle {
+          background-color: @item-color;
+          &:hover {
+            .no-touch & {
+              background-color: @item-color-hover;
+            }
+          }
+        }
+        .rangeslider__fill {
+          background-color: @item-color;
+        }
+        .rangeslider {
+          background-color: @background-color;
+        }
 
-    .slider-model-answer {
-        box-shadow: none;
+        input[type="range"]:focus + .rangeslider .rangeslider__handle {
+            .accessibility & {
+                outline: @focus-outline;
+            }
+        }
     }
+}
 
-    .slider-correct-icon {
-        color: @validation-success;
-        display: none;
-    }
+.slider-widget.show-user-answer.correct {
+  .slider-scale-marker,
+  .rangeslider__fill {
+    background-color: @validation-success;
+  }
+}
+.slider-widget.show-user-answer.incorrect {
+  .slider-scale-marker,
+  .rangeslider__fill {
+    background-color: @validation-error;
+  }
+}
+
+.slider-widget.show-correct-answer {
+  .slider-scale-marker,
+  .slider-model-answer,
+  .rangeslider__fill {
+    background-color: @validation-success;
+  }
+}
 
-    .slider-incorrect-icon {
-        color: @validation-error;
-        display: none;
+// assessment adds no-marking class to article to hide marking icons
+.no-marking {
+    .component-inner .component-widget.disabled.submitted.complete .rangeslider__fill,
+    .component-inner .component-widget.disabled.submitted.complete .slider-scale-marker {
+      color: @item-text-disabled-color;
+      background-color: @item-disabled-color;
     }
 }