Hello @deveer2024,

To prevent ‘0’ from being selected, you can set the minimum value to ‘1’. However, this would change your metric range from 0-10 to 1-10. 

Let me know if this helps.

Hi there @Sachin Nandikol  Thanks

How to set the minimum value? the only way I found was to recode the values so 0 = 1, in case someone do select it...

Hello @deveer2024,

Go into edit mode of Gauge Chart and change values as shown in below screenshot:

Let me know if this helps.

I think we’re not actually talking about the same thing. So apologies for not being accurate. 

@Sachin Nandikol , what I’m looking for is not in a chart (=dashboard) . I’m looking for a question type that uses a graphic slider - type is Gauge. 

The options are only 0-10…. 

Thanks

Hi @deveer2024 the Graphic Slider question type is pretty limited when it comes to customization, and I am not quite sure how to use JS to prevent the selection of the 0.

2 ideas though: 

1::: Graphic Slider: 2 positions count as 10
Using your Recode Values approach, you can set it so that 0 has a recode value of "1" and 9 + 10 both have recode values of "10". Then, you can use CSS to display the "1" gauge when the 0 is selected, and the "10" gauge when 9 or 10 are selected. Once you update the Recode values updated, try adding the below CSS to  the Style section of the Look & Feel:

.JFEScope .SS .TenGauge.SS0 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-1.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS1 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-2.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS2 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-3.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS3 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-4.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS4 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-5.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS5 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-6.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS6 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-7.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS7 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-8.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS8 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-9.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS9 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-10.png) no-repeat !important;
}

.JFEScope .SS .TenGauge.SS10 {
    background: url(/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-10.png) no-repeat !important;
}

2:::Regular Slider: Add space for image to update with custom graphics.

I probably lean towards this one. User Nami has some code together here that adapts a regular slider question to show images based on the position of the handle.

To give it a try, create a slider question and give it 1 statement. Set the minimum to be 0 and the maximum to be 10. Then, get the image URLs for the gauges, updating "yourbrand.az1" with your brand ID and datacenter. In the question text, use the Rich Content Editor's HTML/Source view to update the question text with the below:

Click to write the question text
<div style="text-align: center;"><img src="https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-1.png" id="myImage"></div>

Then, add the below to the question's JavaScript in the OnReady section, updating "yourbrand.az1" with your brand ID and datacenter:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/
var img = jQuery("#myImage");
var currentQID = this.questionId;

// Function to look for track changes in slider
// code inspired by https://www.qualtrics.com/community/discussion/5963/dynamic-accessing-slider-value
jQuery("#" + currentQID + " inputntype = hidden]").change(function() {

// get the current position of the slider and assign it to `answer`
var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());

// print out the answer to the browser console
console.log(answer) ;

// Create the list of Images 1-10 -- in order of presentation. Can be expanded or reduced according to the length of the slider question.
var images_list = t
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-1.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-2.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-3.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-4.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-5.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-6.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-7.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-8.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-9.png',
'https://yourbrand.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-10.png'
]
// Swap the image according to the slider answer, so that the slider position 1 corresponds with the first image (zero indexed).
img>0].src = images_listlanswer - 1]

});

});

@Tom_1842 

The first solution works perfectly. Thank you so much for this. It took me time to try it out!

Thanks to you, I only see now 1 to 10. 

I just want to ask you why should I recode 9 and 10 together, as you mentioned? I need 1 and 10 (so only recoded 0 to be 1)…

Nowased on your solution they see: 

and they can slide to 10 and see this: 

The second solution works perfectly as well! @Tom_1842 . My only issue (with both solutions) is  that if someone wants to give a “1” they need to slide to another score and go back, otherwise it is marked as if they didn’t answer…. is there a trick for that? or some other idea how to over come this?

Everything works perfectly. 

I just added an image to 0 without any score on it :) 

Qualtrics.SurveyEngine.addOnReady(function() {
    var img = jQuery("#myImage");
    var currentQID = this.questionId;

    // Adjust the width of the slider track
    jQuery("#" + currentQID + " .track").css('width', '100px'); // Adjust to your desired width
    jQuery("#" + currentQID + " .QuestionBody").css('width', '200px'); // Adjust to your desired width if needed

    function updateImage() {
        var answer = parseInt(jQuery("#" + currentQID + " input.ResultsInput").eq(0).val());

        console.log(answer);

        // Define a separate image for the 0 value
        var zeroImage = 'https://nayaxcx.qualtrics.com/ControlPanel/Graphic.php?IM=IM_VL9If3PwyBSGq3l';

        // Create the list of Images 1-10 -- in order of presentation
        var images_list = i
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-1.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-2.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-3.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-4.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-5.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-6.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-7.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-8.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-9.png',
            'https://nayaxcx.az1.qualtrics.com/jfe/themes/base-css/basestyles-lfe/version-1678899357872-bbfdc9/files/ss-tengauge-10.png'
        ];

        if (answer === 0) {
            img.attr("src", zeroImage); // Use the zero image if the value is 0
        } else if (answer > 0 && answer <= images_list.length) {
            img.attr("src", images_list�answer - 1]); // Adjusted index for array starting at 0
        }
    }

    function updateSliderValue() {
        var slider = document.getElementById('mySlider');
        var sliderValue = document.getElementById('sliderValue');
        var value = slider.value;

        if (value == 0) {
            sliderValue.textContent = ''; // Hide the number when value is 0
        } else {
            sliderValue.textContent = value; // Show the number for other values
        }
    }

    updateImage();
    updateSliderValue(); // Initialize the slider value display

    jQuery("#" + currentQID + " inputbtype=hidden]").change(function() {
        updateImage();
        updateSliderValue();
    });

    // Listen for changes to the slider
    document.getElementById('mySlider').addEventListener('input', function() {
        updateImage();
        updateSliderValue();
    });
});

@deveer2024 I am glad you found a solution that works for you! I suggested to have 2 positions count towards 10 because the Graphic Slider Gauge question type has 11 positions on its slider and you are looking for a slider that has 10 positions. Having the last 2 positions count as 10 seemed like it could work if sticking with the Graphic Slider Gauge question type.

The issue you noted with the slider handle already being in the respondent's preferred position is something to definitely be mindful of when working with sliders. Things you could try to help make sure respondents know to interact with the slider to register their response:

• Visual Cue: Changing the color of the slider track and handle on hover and when a response has been registered
• Visual Cue: Hiding the slider handle except on hover or when a response has been registered
• Instructions: Adding an example of what a slider looks like that has registered a response
• Instructions: Adding instructional text about interacting with the slider to register the response
• Required: Making the question Force Response will ensure a response is registered before advancing in the survey

If interested, I explored those first 3 options a bit in this post a while back. You could also change up the layout of your survey - I currently lean towards the sliders in Simple layout as having the best visual indicator of a registered response, but you’d need to modify the JS a bit to have it work with the gauge images.

Adding a Visual Cue that indicates the slider has not yet registered a response, like you've done with the scoreless gauge, is a nice approach. I wasn't able to recreate it using your code (I couldn't find id = mySlider), but I like the idea!