Have an idea?

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

Error message on sliders

Hi Zachary,

I'm using your sliders and want to do a range from 300 - 12000.
The system gives me an error message saying: "The response must be between 0 and 1000." Any idea how I can fix this? I'm sending you the code  I'm using below.


<style>
#[% QuestionName() %]_div .slider {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

#[% QuestionName() %]_div .ui-slider-vertical {
    height: 200px;
}

#[% QuestionName() %]_div .slider.unanswered {
    opacity: 0.7;
}

#[% QuestionName() %]_div .sliderHandle {
    padding: 1px;
    width: 35px;
    height: 20px;
    text-align: center;
    border: 1px solid #ccd60;
    background: #b7bedf;
}
</style>

<script>
$(document).ready(function(){
    // Parameters
    var mobileOrientation = 'r'; // 'r' to make mobile grids use horizontal sliders, 'c' to make mobile grids use vertical sliders
    var defaultValue = null;
    var min = 300;
    var max = 12000;
    var step = 100;
    var rtl = false; // whether horizontal sliders should have the highest number on the left
    var ttb = false; // whether vertical sliders should have the highest number on the bottom

    // Read other parameters
    var isMobile = $('#[% QuestionName() %]_div .mobile_grid').length;
    var gridOrientation = SSI_GetGridQuestionSettings('[% QuestionName() %]').orientation == 'row' ? 'r' : 'c';
    var orientation = isMobile ? mobileOrientation : gridOrientation;
    var isRtlOrTtb = (rtl && orientation == 'r') || (ttb && orientation == 'c');

    // Hide first row / first column
    if (gridOrientation == 'r') {
        $('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child > td').hide();
    }

    else {
        $('#[% QuestionName() %]_div .inner_table > tbody > tr > td:first-child').hide();
    }

    // Add sliders
    $('#[% QuestionName() %]_div .numeric_input').each(function(){
        var match = this.id.match(/[% QuestionName() %]_r([0-9]+)_c([0-9]+)/);
        var sliderHtml = '<div class="slider" data-row="' + match[1] + '" data-col="' + match[2] + '"><div class="sliderHandle ui-slider-handle"></div></div>';
        $(this).hide();
        $(this).closest('.input_cell').siblings('.mobile_grid_label').hide();
        $(this).after(sliderHtml);
    });

    // CSS
    $('#[% QuestionName() %]_div .mobile_grid_card .input_cell').each(function(){
        $(this).css('width', $(this).closest('.input_row').css('width'));
    });

    // jQuery UI
    if (defaultValue === null) {
        defaultValue = isRtlOrTtb ? max : min;
    }
    $('#[% QuestionName() %]_div .slider').slider({
        orientation: orientation == 'r' ? 'horizontal' : 'vertical',
        value: defaultValue,
        min: min,
        max: max,
        step: step,
        start: function(event, ui) {
            $(this).removeClass('unanswered');
        },
        slide: function(event, ui) {
            var converted = sliderRtlConversion(isRtlOrTtb, min, max, ui.value);
            $(this).find('.sliderHandle').text(converted);
        },
        stop: function(event, ui) {
            var converted = sliderRtlConversion(isRtlOrTtb, min, max, ui.value);
            $('#[% QuestionName() %]_r' + $(this).data('row') + '_c' + $(this).data('col')).val(converted);
        }
    });

    // Set sliders, add .unanswered
    $('#[% QuestionName() %]_div .slider').each(function(){
        var resp = $('#[% QuestionName() %]_r' + $(this).data('row') + '_c' + $(this).data('col')).val();
        if (resp !== '') {
            var convertedResp = sliderRtlConversion(isRtlOrTtb, min, max, Number(resp));
            $(this).slider('value', convertedResp);
            $(this).find('.sliderHandle').text(resp);
        }
        else {
            $(this).addClass('unanswered');
        }
    });
})

function sliderRtlConversion(isRtlOrTtb, min, max, resp) {
    if (!isRtlOrTtb) {
        return resp;
    }
    return min + max - resp;
}
</script>
<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .inner_table > tbody > tr > td:last-child').each(function(){
        if ($(this).hasClass('col_label_cell')) {
            $(this).before('<td></td>');
            $(this).after('<td></td>');
        }
        else {
            $(this).before('<td>300&nbsp;€</td>');
            $(this).after('<td>12000&nbsp;€</td>');
        }
    });
})
</script>
asked Jun 19, 2020 by Armin
Are the minimum and maximum values of the rows of your grid question set to 0 and 1000?
Hi Zachary,
Problem solved :-)
Thanks a lot

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.
...