I need to customize the Slider’s progress line to display a different color than the default. For instance, if a respondent selects 25% on a 100% slider, the first 25% of the slider should be a different color from the rest of the bar. Also if we can add interval ticks that will be helpful as well. Example Shown in SS attached. Any assistance or recommendations would be greatly appreciated.

Hi@Nam NguyenThank you for sharing this, just checking if this code will change the colour of entire bar or only for the selected part of the bar. The requirement is to only change the colour of selected part of the bar as shown in SS attached.@harendra.kumarOnly the filled part

Thank you @Nam Nguyenfor sharing the code. I am also found a way to add ticks. Below is the Code if this can help anyone. Though it is not a dynamic code but it will do the work.Qualtrics.SurveyEngine.addOnload(function() { const questionContainer = this.getQuestionContainer(); const sliderBar = questionContainer.querySelector('.bar'); const sliderTrack = questionContainer.querySelector('.track'); const tickContainer = document.createElement('div'); tickContainer.style.position = 'relative'; tickContainer.style.width = '100%'; tickContainer.style.height = '20px'; sliderTrack.parentNode.insertBefore(tickContainer, sliderTrack.nextSibling); // Create tick at 0% const tick0 = document.createElement('div'); tick0.style.position = 'absolute'; tick0.style.left = 'calc(0% - 1px)'; tick0.style.width = '5px'; tick0.style.height = '20px'; tick0.style.backgroundColor = 'black'; tickContainer.appendChild(tick0); // Create tick at 25% const tick25 = document.createElement('div'); tick25.style.position = 'absolute'; tick25.style.left = 'calc(25% - 1px)'; tick25.style.width = '5px'; tick25.style.height = '20px'; tick25.style.backgroundColor = 'black'; tickContainer.appendChild(tick25); // Create tick at 50% const tick50 = document.createElement('div'); tick50.style.position = 'absolute'; tick50.style.left = 'calc(50% - 1px)'; tick50.style.width = '5px'; tick50.style.height = '20px'; tick50.style.backgroundColor = 'black'; tickContainer.appendChild(tick50); // Create tick at 75% const tick75 = document.createElement('div'); tick75.style.position = 'absolute'; tick75.style.left = 'calc(75% - 1px)'; tick75.style.width = '5px'; tick75.style.height = '20px'; tick75.style.backgroundColor = 'black'; tickContainer.appendChild(tick75); // Create tick at 100% const tick100 = document.createElement('div'); tick100.style.position = 'absolute'; tick100.style.left = 'calc(100% - 5px)'; tick100.style.width = '5px'; tick100.style.height = '20px'; tick100.style.backgroundColor = 'black'; tickContainer.appendChild(tick100);});

Slider question change of color change of selected part.

Slider question change of color change of selected part. | Experience Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded