Dear all,
I am very new here in the forum and have not yet found an answer to my problem.
I would like to ask several questions in a matrix and I have already managed to get a slider (1-10). It would be great if I could still get two things done:
- When the question appears, the numbers (1-10 above the slider) should already be visible and not just the empty slider.
- If possible, there should be "not at all" in front of the slider and "very much" behind the slider. I have also tried the question type "multiple numeric input", but I didn't manage it.

This is the code I used for the slider:

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

insertSlider (197354);

function insertSlider (qID) {

// Identify this question
var thisQuestion = $('#question'+qID);
thisQuestion.addClass('with-dropdown-sliders');

// Loop through all array drop-downs
$('select.multiflexiselect', thisQuestion).each(function(i, el){
var thisCell = $(el).closest('td');

// Hide the dropdown
$(el).hide();

// Some dropdown values
var currentVal = $(el).val();
var firstVal = Number($('option[value!=""]:first', el).attr('value'));
var secondVal = Number($('option[value!=""]:eq(1)', el).attr('value'));
var lastVal = Number($('option[value!=""]:last', el).attr('value'));

// Insert an input for the slider
var thisInput = $('<input class="inserted-input" type="text" />').insertAfter(el);

// Initiate the slider
thisInput.val(currentVal).bootstrapSlider({
'min': firstVal,
'max': lastVal,
'step': secondVal - firstVal,
'value': Number(currentVal),
'tooltip': 'always'
});

// Listener on the slider
$(thisInput).on('slideStop', function () {
if($('.tooltip', thisCell).is(':hidden')) {
$('.tooltip', thisCell).show();
$('.tooltip', thisCell).css('margin-left', '-'+($('.tooltip', thisCell).width()/2)+'px');
}
$(el).val($(thisInput).val());
});

// Hide the slider call-out if no value selected yet
if(currentVal == '') {
$('.tooltip', thisCell).hide();
}
});
}
});
</script>
<style type="text/css">.with-dropdown-sliders .slider.slider-horizontal {
margin: 1.5em auto 1em auto;
width: 90%;
}

.with-dropdown-sliders .slider.slider-horizontal .slider-handle {
margin-top: -5px;
}


@media(min-width: 769px){
.answertext{
text-align: left !important;
padding-left: 20px !important;
}
}

@media(max-width: 769px){
.answertext{
text-align: left !important;
padding-left: 0px !important;
font-size: 1 em !important;
}

.qnumcode.question-text{
font-size: 1.1 em;
text-align: center;
}
}
</style>



I would be very grateful for any help!

It looks to me like you only have one column so should be using the core sliders in a multiple-numeric type question.

What did you try with that question type and what went wrong?

Thank you very much for your answer! Yes I tried the core slider and it works, except that in the mobile version the labeling is then moved around a lot, so it will probably be unclear to participants.

Would you know how to improve this?
Should I insert the label of the slider in a different way than directly in the sub-questions (see picture)?

Best wishes!

As you see, on mobiles a slider question is very difficult to handle.
What we do, is to check whether the survey is answered on a mobile or not and then display the question in different ways,
e.g. without the left and right text (which is the same in your survey, so you may explain this in the question text)

Of course you have to restructure your data afterwards a bit.

Joffm

If you want something easy use : don't use slider ... dropdown or number are always the best solution.

What LS version are you using?

This is what I see in version 3.22.6 .

True.. Maybe I change it again

This would look great! Did you use array (numeric) or a multiple numeric input? I use version 2.64.1

I used multiple numeric but in your version you may need to add this to the end of your template.css file.

Thank you so much, this works!!