Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Slider displayed differently in browsers - Google Chrome wrong display

Hello everyone, I am using a slider with the following code for the question type Semantic Differential. This is optimally displayed in Internet Explorer. However, if I click my way through the survey in Google Chrome, the scale distorts the higher I select the value.
Maybe you are familiar with this problem and know how to solve this issue.
Best regards,


.semdifffill {
    position: relative;
    background-color: #6d6e6a;
    height: 100%;
    $('#[% QuestionName() %]_div .ui-slider').each(function(){
        var left = $(this).find('.ui-slider-handle').css('left');
        $(this).prepend('<div class="semdifffill" style="width: ' + left + ';"/>');
    $('#[% QuestionName() %]_div .ui-slider').on('slide', function(event, ui){
        $(this).find('.semdifffill').css('width', (ui.value / 10) + '%');
    $('#[% QuestionName() %]_div .ui-slider').on('slidestop', function(){
        var slider = $(this);
        var interval = setInterval(function(){
            var left = $(slider).find('.ui-slider-handle').css('left');
            $(slider).find('.semdifffill').css('width', left);
        }, 25);

asked May 13, 2019 by Tessa
Can you expound on what you mean by "distort"?  Do you have a screenshot demonstrating improper behavior?

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.