Changing the color of the slider on one side of the marker | Experience Community
Skip to main content
Question

Changing the color of the slider on one side of the marker

  • January 12, 2026
  • 1 reply
  • 11 views

Forum|alt.badge.img+1

Is it possible to change the color of the slider only on the left/right side of the marker? See figure below.

 

 

 

1 reply

vgayraud
QPN Level 7 ●●●●●●●
Forum|alt.badge.img+60
  • QPN Level 7 ●●●●●●●
  • January 12, 2026

Hi,

Not extensively tested, but you can start with the following script and adjust.

Qualtrics.SurveyEngine.addOnReady(function () {

var track = this.getQuestionContainer().querySelector('.track');
var handle = this.getQuestionContainer().querySelector('.handle');

if (track && handle) {
function updateTrackColor() {
var trackWidth = track.offsetWidth;
var handleLeft = parseFloat(handle.style.left);
var percent = Math.ceil((handleLeft / trackWidth) * 100);

track.style.background =
'linear-gradient(to right, #ccc 0%, #ccc ' + percent +
'%, #2196F3 ' + percent + '%, #2196F3 100%)';
}

new MutationObserver(updateTrackColor)
.observe(handle, {
attributes: true,
attributeFilter: ['style']
});

updateTrackColor();
}
});