Customising the gradient/increment defaults for slider | XM Community
Skip to main content

I am trying to create a slider with:

min value of 0 days and max value of 7 days with scale increments of 0.25.

At the moment I can only select up to 20 grid lines but I need 28.

How can I customise the incremental scale of my slider to allow responders to select at 0.25 increments?

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
    }
});


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>
  1. Add a text entry question → rich content editor → source and add this code behind your question text
    <div id="slider"></div>

     

  2. 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: i0], // 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];
    }
    });
    });
    1. Check preview

       


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

Best wishes,

Denise.


Leave a Reply