Script disappears once I click on it. | XM Community
Skip to main content

I'm attempting to add a round slider to one of the questions in my survey using the roundSlider jQuery plugin (https://roundsliderui.com/) but I'm encountering a problem with the script. Whenever I click or try to adjust the slider, it disappears. Does anyone know what the issue might be?
Here is the JavaScript code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
$("#slider1").roundSlider({
    sliderType: "min-range",
    width: 55,
    value: 25,
    keyboardAction: false,
    animation: false,
    radius: 75,
    handleSize: "-50",
    lineCap: "square",
    min: 1,
    max: 99,
    tooltipFormat: "tooltipVal2",
    change: function() {
        var sliderValue = getSliderValue();
        }
});
});
Here is the HTML code:










Please adjust the slider:




A snapshot of the slider:
snapshot_slider.png

Hi, I am able to reproduce the issue but am not sure why it is happening. The elements that make up the slider look to disappear from the dom tree when the slider is clicked on. I see this issue was also posted to roundsliderui.com and seems to have the developer's attention, so I'd recommend following up there with an example link if you can.


@alzanki

I replaced first line and included your code in this manner onload and was able to click and move the slider in round format.

jQuery('.horizontalbar').roundSlider({

});

Also, unable to see your HTML in your question. 

Hope it helps!


Hi @Deepak , the HTML of the original poster is below. I grabbed it using inspect browser on this page:

<style>

.rs-control .rs-range-color {
background-color: #0000ff;
}

.rs-control .rs-path-color {
background-color: #ffff00;
}

.rs-control .rs-handle {
background-color: #838383;
}

.rs-control .rs-bg-color {
background-color: white;
}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.js"></script>

<script>
function tooltipVal2(args) {
return args.value + "%";
}
</script>

Please adjust the slider:
<br><br><br>
<div id="slider1"></div>

The scripts can be moved to the survey's Header. The JS selects the element "slider1" and then creates the roundslider. In your using '.horizontalbar', are you using a Slider question type on your end? The roundslider disappears for me when using that as well. I'd be interested to see a QSF or preview link where it is working for you if you can share.


@Tom_1842 

Unfortunately, it started disappearing for me too. It was working fine for a while. 

Not sure what’s the problem.

 


Leave a Reply