Fixed issue #13773: Cannot style slider handle when not touched anymore

LimeSurvey · Jul 12, 2018 · d390b7d · d390b7d
1 parent afaeb03
commit d390b7d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/assets/packages/questions/numeric-slider/css/numeric-slider.css b/assets/packages/questions/numeric-slider/css/numeric-slider.css
@@ -15,6 +15,17 @@
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
 }
+
+.slider.slider-reset .slider-handle,
+.slider.slider-untouched .slider-handle {
+  background-color: grey;
+}
+.slider.slider-reset .slider-track .slider-selection,
+.slider.slider-untouched .slider-track .slider-selection {
+  background: transparent;
+  box-shadow: none;
+}
+
 /* FA for custom */
 .slider-handle.custom::before {
 font-family: FontAwesome;

diff --git a/assets/packages/questions/numeric-slider/scripts/numeric-slider.js b/assets/packages/questions/numeric-slider/scripts/numeric-slider.js
@@ -62,6 +62,7 @@ var LSSlider = function (options) {
          */
         slideStartEvent = function () {
             listItemObject.find('.slider-container').removeClass('slider-untouched').removeClass('slider-reset').addClass('slider-touched');
+            sliderObject.$sliderElem.removeClass('slider-untouched').removeClass('slider-reset').addClass('slider-touched');
             listItemObject.find('div.tooltip').show(); // Show the tooltip
             var currentValue = elementObject.val(); // We get the current value of the bootstrapSlider
             var displayValue = currentValue.toString().replace('.', separator); // We format it with the right separator
@@ -130,6 +131,7 @@ var LSSlider = function (options) {
                 e.preventDefault();
                 /* Position slider button at position */
                 listItemObject.find('.slider-container').removeClass('slider-touched').addClass('slider-reset');
+                sliderObject.$sliderElem.removeClass('slider-touched').addClass('slider-reset');
                 rootElementObject.addClass('slider-untouched');
                 setValue(null, true, true);
                 /* if don't set position : reset to '' */
@@ -155,7 +157,7 @@ var LSSlider = function (options) {
             }
 
             sliderObject = new Slider(elementObject[0], createSliderSettings());
-
+            sliderObject.$sliderElem.addClass('slider-untouched');
             triggerChanges();