Fixed issue #16863: Multi Numeric Slider custom Font Awesome icons (#…

…1680)

There were several problems:
- numeric-slider.js set the CSS for the custom slider handle, but it used a wrong selector.
- numeric-slider.js set the content to the unicode value directly, without using backslash.
- In the case of Fruity, it was setting the slider handle's background color, which works for 'round' and 'square' but not for 'triangle' and 'custom'. Fixed by adding this rule to all variations: .fruity .slider-handle.custom,.fruity .slider-handle.triangle{background-color:transparent}

application/views/survey/questions/answer/multiplenumeric/rows/sliders/answer_row.twig

@@ -39,7 +39,7 @@
                 <div class='col-xs-12 col-sm-2 slider-left text-right'>{{ sliderleft }}</div>
             {% endif %}
 
-            <div class="slider-container ls-input-group col-xs-12 col-sm-{{sliderWidth}}" style="min-height:15px;">
+            <div class="slider-container ls-input-group col-xs-12 col-sm-{{sliderWidth}}" id="answer{{myfname}}slid-container">
                     {{ C.Html.textField( myfname ~ 'slid', dispVal ,{
                             'class': 'form-control answer-item numeric-item hidden',
                             'id' : "answer" ~ myfname ~ "slid", 

assets/packages/questions/numeric-slider/scripts/numeric-slider.js

@@ -152,7 +152,7 @@ var LSSlider = function (options) {
             if (custom_handle != null) {
                var customStyleSheet = $('<style></style>');
                customStyleSheet.attr('type','text/css');
-               customStyleSheet.text('#' + elementObject.attr('id') + ' .slider-handle.custom::before { content: "' + custom_handle + '" }');
+               customStyleSheet.text('#' + elementObject.attr('id') + '-container .slider-handle.custom::before { content: "\\' + custom_handle + '" }');
                customStyleSheet.appendTo('body');
                 // document.styleSheets[0].addRule('#' + elementObject.attr('id') + ' .slider-handle.custom::before', '{ content: "' + custom_handle + '" }');
             }

themes/survey/bootswatch/css/theme.css

@@ -290,6 +290,10 @@ padding-top:1em;padding-bottom:1em;margin-bottom:2em;
     cursor: pointer;
 }
 
+.slider-container {
+    min-height: 15px;
+}
+
 /* Show more the heading in table */
 .ls-answers .ls-heading th{font-weight:700}
 /* Max width for some answer part */

themes/survey/fruity/css/theme.css

@@ -306,6 +306,9 @@ element.style {
     min-height: 50px;
 }
 
+.slider-container {
+    min-height: 15px;
+}
 
 /* Show more the heading in table */
 .ls-answers .ls-heading th{font-weight:700}

themes/survey/vanilla/css/theme.css

@@ -286,6 +286,9 @@ body {
     min-height: 50px;
 }
 
+.slider-container {
+    min-height: 15px;
+}
 
 /* Show more the heading in table */
 .ls-answers .ls-heading th{font-weight:700}