Hi,
I’m trying to implement a dual-handle slider based on this code. However, I’m having issues with the embedded data block recording user answers. Regardless of user input on the slider, the embedded data fields aren’t updating. If anybody has any ideas on what’s wrong, it would be greatly appreciated. This is the code I’m using:
<!-- Include noUiSlider CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.css" rel="stylesheet">
<!-- Include noUiSlider JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.js"></script>
<!-- Include wNumb -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<!-- Container for the Slider -->
<div id="slider"></div>
<script>
Qualtrics.SurveyEngine.addOnload(function() {
// Select the slider container
var slider = document.getElementById('slider');
// Create the dual-handle slider with tooltips
noUiSlider.create(slider, {
start: b20, 80],
connect: true,
range: {
'min': 0,
'max': 100
},
tooltips: wNumb({ decimals: 0 }), wNumb({ decimals: 0 })] // 0 decimals in tooltips
});
// Ensure Qualtrics records the data
slider.noUiSlider.on('change', function(values, handle) {
// Set the embedded data with slider values
Qualtrics.SurveyEngine.setEmbeddedData('sliderValue1', values0]);
Qualtrics.SurveyEngine.setEmbeddedData('sliderValue2', values1]);
});
});
</script>