<script type="text/javascript" data-author="Tony Partner">
 
   $(document).on('ready pjax:scriptcomplete',function(){
 
        // Move the slider labels
    $('#question{QID} .ls-slider-item-row').each(function(i) {
            $('label', this).insertAfter($('> div:eq(0)', this));
        });
 
    });
</script>

<style type="text/css" data-author="Tony Partner">
    @media (max-width: 768px) {
        #question{QID} .answer-container li > div > div label {
            margin: 1.5em 0;
        }
    }
 
 
  @media only screen and (min-width: 768px) {
        #question{QID} .answer-container .row {
            margin: 0;
        }
 
        #question{QID} .answer-container ul {
            display: grid;
            grid-auto-flow: column;
            grid-gap: 3px;
        }
 
        #question{QID} .answer-container li {
            display: block;
            padding: 0;
            border: 1px solid #e7e7e7;
        }
 
        #question{QID} .answer-container li > div > div label {
            display: block;
            margin: 0 0 0.5em;
            width: 100%;
            text-align: center;
            padding: 0;
        }
 
        #question{QID} .answer-container li > div > div > div {
            width: 100%;
            text-align: center;
            padding: 0 !important;
            margin-top: 1.5em;
        }
 
        #question{QID} .answer-container .ls-slider-answer-row {
            margin: 0;
            width: 100%;
        }
 
        #question{QID} .answer-container .slider.slider-vertical {
            margin-bottom: 1em;
        }
    }
</style>

 .fruity .slider-selection {
     background-image: linear-gradient(0deg,#f7f7f7,#f7f7f7)
}
  .slider-track-high {
    background-color: red;
}
.slider-untouched .slider-track-high {
    background-color: #f7f7f7;
}