Have an idea?

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

Having values appear in semantic differential/ slider bar questions

Is there a way to make the value of the number appear when you hold the mouse/click on slider of the semantic differential question?
asked Jan 9 by anonymous

1 Answer

0 votes
The "Sliders" questions from the Community Question Library seem like a decent place to start:

https://sawtoothsoftware.com/community-question-library/1756-sliders-single-value

I would recommend disabling "Rows become separate questions on mobile" in the question's format settings, as well as adding this to the end of the footer:

<style>
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(1),
#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(3) {
    width: 10%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td:nth-child(2) {
    width: 80%;
}

#[% QuestionName() %]_div .inner_table > tbody > tr > td.row_label_cell:first-child {
    text-align: left;
}
</style>

<script>
$(document).ready(function(){
    var rightLabels = ['alpha', 'beta', 'gamma'];
    $('#[% QuestionName() %]_div .inner_table > tbody > tr:not(:first-child)').each(function(){
        var td = $(this).children(':first-child').clone();
        $(td).text(rightLabels.shift());
        $(this).append($(td));
    });
})
</script>


Line 19 can be updated with the labels you want to appear on the right side of the question.  You can type these in by hand, or use the Sawtooth Script function ListLabelsArray to use texts from a list.
answered Jan 10 by Zachary Platinum Sawtooth Software, Inc. (120,900 points)
Thanks, I have vertical sliders and want to know how to add labels to them with 'Worst Imaginable" at the bottom and 'Best Imaginable' at the top with the top and have the slider bar labeled 0-100 with labels in increments of 10.

You said line 19 can be updated with labels I want to appear, but those labels don't appear when I preview the question
Most of what you're asking for is available with this question's settings.  If you're doing vertical rather than horizontal, though, I would recommend appending this code rather than my code before:

<script>
$(document).ready(function(){
    var bottomLabels = ['alpha', 'beta', 'gamma'];
    
    $('#[% QuestionName() %]_div .inner_table > tbody').append($('#[% QuestionName() %]_div .inner_table > tbody > tr:first-child').clone());
    
    $('#[% QuestionName() %]_div .inner_table > tbody > tr:last-child > td:not(:first-child)').each(function(){
        $(this).text(bottomLabels.shift());
    });
})
</script>
...