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,

Tessa


 
<style>
.semdifffill {
    position: relative;
    background-color: #6d6e6a;
    height: 100%;
}
</style>
 
<script>
$(document).ready(function(){
    $('#[% 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);
            clearInterval(interval);
        }, 25);
    });
})

</script>
 
asked May 13 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.
...