Customising the gradient/increment defaults for slider

You won’t be able to do it with a Qualtrics slider.  You can use a noUiSlider attached to a text entry question.

Thanks for your prompt response Tom, I’ll give it a try.

Hi again,

How do I use this code? I’m not a coder so using the Java format, how do I get this to work?

Here is the window I have:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

Here is the code from the link you sent:

<div id="slider"></div>

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

@DW1000

1. Add this code to your header → source

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/leongersen/noUiSlider@15.7.1/dist/nouislider.min.css">
<script src="https://cdn.jsdelivr.net/gh/leongersen/noUiSlider@15.7.1/dist/nouislider.min.js"></script>

2. Add a text entry question → rich content editor → source and add this code behind your question text

   <div id="slider"></div>

   

    

3. Add this JavaScript to that question in custom JavaScript

   Qualtrics.SurveyEngine.addOnload(function()
   {
     var slider = document.getElementById('slider');
     var questionId = this.questionId; // Store the question ID in a variable
   
     noUiSlider.create(slider, {
       start: [0], // Set your initial value
       range: {
         'min': 0,     // Minimum value (0 days)
         'max': 7,     // Maximum value (7 days)
       },
       step: 0.25,     // Scale increments of 0.25 days
     });
   
     slider.noUiSlider.on('update', function (values, handle) {    
   
       var qualtricsQuestionId = 'QR~' + questionId;
       console.log('qualtricsQuestionId:', qualtricsQuestionId);
       var qualtricsQuestion = document.getElementById(qualtricsQuestionId);
       if (qualtricsQuestion) {
         qualtricsQuestion.value = values[0];
       }
     });
   });

   4. Check preview

      

       

Thanks very much - I’ll give this a try :-)

Best wishes,

Denise.