Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Search Results (Searched for: background)

  • free521521521
  • free521521521's Avatar
Yesterday 21:22
The Email template button issue. was created by free521521521
I want to add a button in Email template, so I use:
Code:
<a href="{SURVEYURL}" style="background-color: #4CAF50; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px;">Start Survey</a>

But when I check the test Email it show this:
" www.sample.com/survey/index.php?r=survey...token=xxxxxx=zh-Hans " style="background-color: #4CAF50; color: white; padding: 12px 18px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px;">Start Survey"

Seems the SURVEYURL broke the HTML button, how to solve this problem?

​​​​​​​Thanks!
  • zahlenzauber
  • zahlenzauber's Avatar
Yesterday 14:23
Replied by zahlenzauber on topic X-Skala fixieren
Alternative: Matrix-Kopfzeilen mit custom.css fixieren

In unserer Installation bietet die Vorlage fruity_twentythree keine Design-Option zum Fixieren der Antwortoptionen (LimeSurvey Community Edition Version 6.5.3+240415) (also keine Option "Immer sichtbare Matrix-Kopfzeilen").


Folgende Eintragung in der custom.css hat funktioniert (setzt entsprechende Schreibrechte voraus):

/******************
Abstand nach oben etwas mehr als maximale Größe von .logo-container plus padding
funktioniert nur mit !important
Hintergrundfarbe nicht notwendig
*/

table > thead {
  position: sticky!important;
  top: 105px;  
 z-index: 100;
 background-color:white;
}

 
  • BBSR-SR5
  • BBSR-SR5's Avatar
24 Apr 2024 17:54 - 24 Apr 2024 19:28
I've been using this script successfully, but one weird thing is occuring. It's a longer table so I've been using repeated headers so people can see the meaning of the options even when they scroll down. For some reason in most cases it does seem to automatically sort the repeated header to the bottom of the list '(Kinda buggy, but useful behaviour for me since I rather like to have the header at the bottom of the table). But with my current script it's just vanishing.
Code:
<script type="text/javascript" data-author="BBSR-SR5">
  $(document).on('ready pjax:scriptcomplete',function(){
    
 
    //alert($('.modal-footer a').length)
    
    // Find the modal with the ID "bootstrap-alert-box-modal"
    var $modal = $('#bootstrap-alert-box-modal');
 
    // Check if the modal is found
    if ($modal.length > 0) {
        // Find the modal footer within the modal
        var $modalFooter = $modal.find('.modal-footer');
        var $anchors = $modalFooter.find('a');
 
        // Check if there are exactly two anchor elements
        if ($anchors.length === 2) {
            // Detach the anchor elements from the DOM
            var $firstAnchor = $anchors.eq(0).detach();
            var $secondAnchor = $anchors.eq(1).detach();
 
            // Reinsert the anchor elements in reverse order into the modal footer
            $modalFooter.append($secondAnchor).append($firstAnchor);
        }
    }
    
    //Change warning text
    // Define some text strings
    var originalModalText = "Eine oder mehrere Pflichtfragen sind nicht beantwortet worden. Bitte beantworten Sie diese zuerst, um fortzufahren!";
    var newModalText = "Sie haben auf dieser Seite mind. 1 Frage nicht beantwortet. Möchten Sie diese noch beantworten oder zur nächsten Seite weitergehen?";
 
    // Modify the modal text
    var modalBody = $('.modal-body p').filter(function() {
      return $.trim($(this).text()) == originalModalText;
    });
    if(modalBody.length > 0) {
      modalBody.text(newModalText);
    }
    
    
    
    //'' Randomisation Function begins here! **//
    //**********************************************//
 
   function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = ;
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        // Identify some elements and define variables
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
        var orderQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
        var orderInput = $(':text.form-control:eq(0)', orderQuestion);
        var array_res;
        var aOrder = ;
        var $headerRow = $("table thead tr").clone()
    
 
        // Previously set order
        if($.trim($(orderInput).val()) != '') {
            array_res = $.trim($(orderInput).val()).split(',');
        }
        // No previous order set
        else {    
            // Special codes appear after
            var afterCode = 4;
 
            //Array for K Codes
            var array_k = ["b","d","g","h","i","j","l"];
 
            //Array for N Codes
            var array_n = ["c","e","f","k","m","n"];
 
            //Array for Special K Codes
            var array_sk = ;
 
            //Array for Special N codes
            var array_sn = ["a"];
 
            //Array for super special codes
            var array_ss = ["o"];
 
            // Shuffle order of "normal" arrays
            shuffleArray(array_k);
            shuffleArray(array_n);
 
            // Slice "normal" arrays and merge second part to special codes
            array_sk = array_sk.concat(array_k.slice(afterCode));
            array_sn = array_sn.concat(array_n.slice(afterCode));
 
            // Save only first part of "normal" arrays
            array_k = array_k.slice(0, afterCode);
            array_n = array_n.slice(0, afterCode);
 
            // Shuffle special arrays
            shuffleArray(array_sk);
            shuffleArray(array_sn);
            shuffleArray(array_ss);
 
            // Combine normal and special arrays
            array_k = array_k.concat(array_sk);
            array_n = array_n.concat(array_sn);
 
            // Merge arrays in order n,k,n,k...
            array_res = mergeArrays(array_k, array_n);
 
            //Add super special array to end of result array
            array_res = array_res.concat(array_ss);
 
            // Load the hidden order input
            $(orderInput).val(array_res);
        }
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
    
      
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
    });   
 
 //$('tr.answers-list:eq(0)', thisQuestion).append('<tr class="header-row"></tr>');
 
</script>[/i][/i][/i][/i]

I've been trying to just copy the header and paste it to the bottom of the table, but my code doesn't work. Any ideas how to fix/do this?
  • kzzz_520
  • kzzz_520's Avatar
24 Apr 2024 17:36
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.4
Own server or LimeSurvey hosting:
Survey theme/template:
==================
Dear LimeSurvey community,
I have a question regarding survey design. I would like respondents to make 2 group of random order choices. In each group, they first need to choose their preferred housing, and then, select their preferred mode of transportation. It's a combination of a random question and a fixed question. I have learned from Tpartner’s code in other’s topic, which is a JavaScript/CSS solution. It works very effectively for displaying the process of selecting housing and transportation options.

However, I encountered a issue. In each group, I hope the answer to the first question can influence the display of the second question. That is to say, if they choose housing A (new housing) or housing B (new housing), they will be presented with the transportation mode selection question. If they choose housing C (maintain current situation), they will not be presented with the transportation mode selection question.I edited the conditions of the transportation mode selection question to show/hide it. But it malfunctioned. If housing C (current situation) is selected, the transportation mode selection question still appears. I'm confuse how to make it work. Do I need to resolve it through programming? I don't have a programming background and don't know how to proceed.

 Another issue I have is that I don't want to display the 'Previous' button during these two group to prevent them from going back and modifying their previous answers. And in other questions of the survey,  the 'Previous' button is still needed.

I am not sure if there is a way to solve these problem. Maybe you can help me! Please let me know if you need more information. Thank you so much!
  • tpartner
  • tpartner's Avatar
17 Apr 2024 18:49
My solution would be to do as Joffm suggests - load the sub-question order in a hidden (via CSS class) short-text question. On page load, if that question is found to be populated, that order is used, otherwise your randomization alogorithm kick in.

Code:
<script type="text/javascript">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        // Identify some elements and define variables
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
        var orderQuestion = $(thisQuestion).nextAll('.text-short:eq(0)');
        var orderInput = $(':text.form-control:eq(0)', orderQuestion);
        var array_res;
        var aOrder = [];
 
        // Previously set order
        if($.trim($(orderInput).val()) != '') {
            array_res = $.trim($(orderInput).val()).split(',');
        }
        // No previous order set
        else {    
            // Special codes appear after
            var afterCode = 4;
 
            //Array for K Codes
            var array_k = ["b","d","g","h","i","j","l"];
 
            //Array for N Codes
            var array_n = ["c","e","f","k","m","n"];
 
            //Array for Special K Codes
            var array_sk = [];
 
            //Array for Special N codes
            var array_sn = ["a"];
 
            //Array for super special codes
            var array_ss = ["p"];
 
            // Shuffle order of "normal" arrays
            shuffleArray(array_k);
            shuffleArray(array_n);
 
            // Slice "normal" arrays and merge second part to special codes
            array_sk = array_sk.concat(array_k.slice(afterCode));
            array_sn = array_sn.concat(array_n.slice(afterCode));
 
            // Save only first part of "normal" arrays
            array_k = array_k.slice(0, afterCode);
            array_n = array_n.slice(0, afterCode);
 
            // Shuffle special arrays
            shuffleArray(array_sk);
            shuffleArray(array_sn);
            shuffleArray(array_ss);
 
            // Combine normal and special arrays
            array_k = array_k.concat(array_sk);
            array_n = array_n.concat(array_sn);
 
            // Merge arrays in order n,k,n,k...
            array_res = mergeArrays(array_k, array_n);
 
            //Add super special array to end of result array
            array_res = array_res.concat(array_ss);
 
            // Load the hidden order input
            $(orderInput).val(array_res);
        }
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
    });   
 
</script>

Sample survey:  

File Attachment:

File Name: limesurvey...3182.lss
File Size:56 KB
  • BBSR-SR5
  • BBSR-SR5's Avatar
17 Apr 2024 18:22
Hm actually, I figured it might be easier to replace the Math.random() function with a seeded random function and then use the survey number as a seed. That way it should stay constant for a user.

Though how would I access that? Right now I've plugged in Date.now()
Code:
<script type="text/javascript" data-author="BBSR-SR5 &amp; Tony Partner">
  $(document).on('ready pjax:scriptcomplete',function(){
 
 
//Define Seeded Random function
   function splitmix32(a) {
  return function() {
    a |= 0;
    a = a + 0x9e3779b9 | 0;
    let t = a ^ a >>> 16;
    t = Math.imul(t, 0x21f0aaad);
    t = t ^ t >>> 15;
    t = Math.imul(t, 0x735a2d97);
    return ((t = t ^ t >>> 15) >>> 0) / 4294967296;
  };
}
 
function shuffleArray(array) {
  const seed = Date.now();
  const random = splitmix32(seed);
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}
 
    // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
    //Identify this question
    var thisQuestion = $('#question{QID}');
    var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
    var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
    // Special codes appear after
        var afterCode = 4;
 
        //Array for K Codes
        var array_k = ["b","d","g","h","i","j","l"];
 
        //Array for N Codes
        var array_n = ["c","e","f","k","m","n"];
 
        //Array for Special K Codes
        var array_sk = [];
 
        //Array for Special N codes
        var array_sn = ["a"];
 
        //Array for super special codes
        var array_ss = ["o"];
 
    // Shuffle order of "normal" arrays
        shuffleArray(array_k);
        shuffleArray(array_n);
 
 
        // Slice "normal" arrays and merge second part to special codes
        array_sk = array_sk.concat(array_k.slice(afterCode));
        array_sn = array_sn.concat(array_n.slice(afterCode));
 
        // Save only first part of "normal" arrays
        array_k = array_k.slice(0, afterCode);
        array_n = array_n.slice(0, afterCode);
 
        // Shuffle special arrays
        shuffleArray(array_sk);
        shuffleArray(array_sn);
        shuffleArray(array_ss);
 
        // Combine normal and special arrays
        array_k = array_k.concat(array_sk);
        array_n = array_n.concat(array_sn);
 
        // Merge arrays in order n,k,n,k...
        var array_res = mergeArrays(array_k, array_n);
 
        //Add super special array to end of result array
        array_res = array_res.concat(array_ss);
 
 
 
 
    // Loop through the answer codes
    $.each(array_res, function(i, val) {
      // Move the answer item
      $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
    });
 
 
 
 
    // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
 
      //alert(array_res);
    //console.log(array_res);
    });
 
 
 
</script>

How would I access the participant number from the code?
  • tpartner
  • tpartner's Avatar
12 Apr 2024 14:06
This should do it:

Code:
<script type="text/javascript">
    $(document).on('ready pjax:scriptcomplete',function(){
 
        function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
            }
            return array;
        }
 
        // Merge function
        function mergeArrays(array1, array2) {
            var mergedArray = [];
            var maxLength = Math.max(array1.length, array2.length);
 
            for (var i = 0; i < maxLength; i++) {
                if (i < array2.length) {
                    mergedArray.push(array2[i]);
                }
                if (i < array1.length) {
                    mergedArray.push(array1[i]);
                }
            }
 
            return mergedArray;
        }
 
        //Identify this question
        var thisQuestion = $('#question{QID}');
        var thisAnswerList = $('tr.answers-list:eq(0)', thisQuestion).parent();
        var thisTable = $('table.subquestion-list:eq(0)', thisQuestion);
 
        // Special codes appear after
        var afterCode = 4;
 
        //Array for K Codes
        var array_k = ["b","d","g","h","i","j","l"];
 
        //Array for N Codes
        var array_n = ["c","e","f","k","m","n"];
 
        //Array for Special K Codes
        var array_sk = [];
 
        //Array for Special N codes
        var array_sn = ["a"];
 
        //Array for super special codes
        var array_ss = ["p"];
 
        // Shuffle order of "normal" arrays
        shuffleArray(array_k);
        shuffleArray(array_n);
 
        // Slice "normal" arrays and merge second part to special codes
        array_sk = array_sk.concat(array_k.slice(afterCode));
        array_sn = array_sn.concat(array_n.slice(afterCode));
 
        // Save only first part of "normal" arrays
        array_k = array_k.slice(0, afterCode);
        array_n = array_n.slice(0, afterCode);
 
        // Shuffle special arrays
        shuffleArray(array_sk);
        shuffleArray(array_sn);
        shuffleArray(array_ss);
 
        // Combine normal and special arrays
        array_k = array_k.concat(array_sk);
        array_n = array_n.concat(array_sn);
 
        // Merge arrays in order n,k,n,k...
        var array_res = mergeArrays(array_k, array_n);
 
        //Add super special array to end of result array
        array_res = array_res.concat(array_ss);
 
        // Loop through the answer codes
        $.each(array_res, function(i, val) {
            // Move the answer item
            $(thisAnswerList).append($('tr.answers-list[id$="X{QID}'+val+'"]', thisQuestion));
        });
 
        // Fix up the row background colours
        $('tr.answers-list', thisQuestion). each (function(i){
            $(this).removeClass('ls-even ls-odd');
            if(i % 2 == 0) {
                $(this).addClass('ls-even');
            }
            else {
                $(this).addClass('ls-odd');
            }
        });
 
    });  
 
</script>

Sample survey: 

File Attachment:

File Name: limesurvey...3181.lss
File Size:41 KB
  • tpartner
  • tpartner's Avatar
09 Apr 2024 16:49
Try this in custom.css:

Code:
.inserted-spacer-question .radio-item:last-child label::before {
    border-color: #CCCCCC;
    background-color: #FFFFFF;
}
 
.inserted-spacer-question .radio-item:last-child label::after {
    background-color: #CCCCCC;
}
  • BBSR-SR5
  • BBSR-SR5's Avatar
09 Apr 2024 16:32
I've got another little design adjustment I want to do.

I want to color the radio buttons in the last/non-answer column grey.

I need to adjust the class radio-item label:before for this purpose. But I'm not sure how I make sure this is only applied to the last column.
Code:
.radio-item label::before {
border: 2px solid #6E748C;
background-color: #C6C6C6;
}

In the developer mode the class is attached to this:
 

I've been trying something like this:
Code:
$(document).on('ready pjax:scriptcomplete',function(){
 
    $('.array-flexible-row.inserted-spacer-question').each(function(e) {
 
        // Identify some elements
        var thisQuestion = $(this);
        var thisTable = $('table.subquestion-list', thisQuestion);
 
        // Adjust column widths
        var spacerWidthPercent = 4;
        var labelWidth = ($('col:first', thisTable).width()/$('colgroup:first', thisTable).width())*100;
        var answerWidth = (100-labelWidth-spacerWidthPercent)/$('col:gt(0)', thisTable).length;
        $('col:gt(0)', thisTable).width(answerWidth+'%');
 
        // Insert some elements
        $('col:last', thisTable).before('<col class="inserted-spacer">');
        $('thead th:last-child, tr.ls-heading-repeat th:last-child', thisTable).before('<th class="inserted-spacer" />');
        $('tbody td.answer-item:last-child', thisTable).before('<td class="inserted-spacer" />');
        //$('col:last', thisTable).addClass('radio-item-nr');
    });
 
});
I renamed the class to radio-item-nr, so it wouldn't overwrite the radio-item class elsewhere.

But this doesn't work. I assume that's because I'm trying to attach it at the wrong point?

 
  • MariAngelesCalvo
  • MariAngelesCalvo's Avatar
08 Apr 2024 20:51
Hello, Joffm!

Now I have been able to adjust the background colours I needed. Thank you very much!
  • Joffm
  • Joffm's Avatar
08 Apr 2024 20:15 - 08 Apr 2024 20:21
When I open the webdevelopment tool
I see this (in theme "bootswatch")
 
As you see the background color is set to "maroon.

Now when you investigate the navbar you see that here the class ".bg-light" is affected
 

Adding both to the "custom.css"
 

 

Or you address the navbar and other elements directly like
Code:
.navbar {
  background-color: yellow !important;
}


to get this
 

I do not see a real issue.


And at the beginning you showed "bootswatch". But now you talk about "vanilla".
Ths is different.
As you will find out the "question-title-container" has no added class "bg-primary". So you have to set the container's background color.
Code:
.question-title-container {
  background-color: yellow !important;
}


And fruity might be different as well.
Often you have to specify it, like
.fruity .bg-light {..

So investigate and try.

Joffm
  • MariAngelesCalvo
  • MariAngelesCalvo's Avatar
08 Apr 2024 18:37
Dear Joffm,

thank's for your quick reply! But I don't think the solution has worked. I saved the code in both the "custom.css" and "theme.css" screens and it didn't change the colour of the ".navbar" or the ".navbar-brand". With F12 I have not been able to locate the colour either and the most I have been able to do is to "patch" the colour in the bar. What I managed to change was to search for "navbar" and add the code " background-color: #6b8e23; "... Do you think you could help me to know how to change the colour of the whole bar?Other alternatives that I have tried and that worked in previous versions, but in this 6.5.2 are not working:".navbar-default { background-color: #3c3c3c; }".navbar {Background-color: #6b8e23;}.navbar .navbar-brand {Colour: #6b8e23;Background-color: #6b8e23;}.navbar .navbar-brand:hover,.navbar .navbar-brand:focus {Colour: #FFFFFFFF;Background-color: #6b8e23;} "In the Vanilla theme I did manage to change the background-colour of the title of the question. I'm attaching a screenshot of what happened with the ".navbar" and the theme for what it's worth.

Thank's, again!   

File Attachment:

File Name: extends_vanilla.zip
File Size:115 KB

File Attachment:

File Name: extends_vanilla.zip
File Size:115 KB
  • Joffm
  • Joffm's Avatar
08 Apr 2024 17:39
Hi,
investigate with the webdevelopmemnt tool of your browser (F12)

To chnage the background color generally you may set the color
Code:
.bg-primary {
   background-color: maroon !important;
}
 

Joffm
 
  • MariAngelesCalvo
  • MariAngelesCalvo's Avatar
08 Apr 2024 17:08
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.2
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Vanilla, Bootswatch or Fruity
==================
HI! 
I have recently updated LimeSurvey to 6.5.2 version and my theme templates are no longer usable. I need to change the background colour of the "navbar", "navbar-brand", "question.title/valid" elements (the background colour of the question text), but using the codes and actions from previous versions is not working. E.G.:

Theme editor --> Custom.css/Theme.css: ".navbar .navbar-brand { background-color: #FFFFFF }

Do you know what codes I can use to change the background colour of these elements in the "Vanilla", "bootswatch" or "fruity" themes? Where should I insert them?

Thanks for your help!

Best regards,
Mª Ángeles. 

https://drive.google.com/file/d/1--Lvvu43XRnogi7ODCFiELoyeyW8luGO/view?usp=drive_link
[img
  • Joffm
  • Joffm's Avatar
03 Apr 2024 22:30
Replied by Joffm on topic How to use Vertical Silder
Always investigate with the webdevelopment tool of your browser (F12)
Here you see what you may change.

Reverse the colors of the slider.

Like
Code:
 .fruity .slider-selection {
     background-image: linear-gradient(0deg,#f7f7f7,#f7f7f7)
}
  .slider-track-high {
    background-color: red;
}
.slider-untouched .slider-track-high {
    background-color: #f7f7f7;
}
 
Displaying 1 - 15 out of 107 results.

Lime-years ahead

Online-surveys for every purse and purpose