@harendra.kumar,

I have a JS function that adds slider ticks that you can contact me about via private message.

To add colors to the sliders, you’ll first need to switch the Slider Type from Sliders to Bars. Then you can set the background image to linear-gradient.

Hi @TomG 

I believe you're charging for the code you have, and I'm not in favour of that. This community is meant for knowledge sharing, and it should stay that way.

@harendra.kumar

You can follow @TomG code for the slider ticks
Switch the Slider Type from Sliders to Bars. Add this code to the question JavaScript, change the color code if you like

Qualtrics.SurveyEngine.addOnload(function() {

});

Qualtrics.SurveyEngine.addOnReady(function() {

  const questionContainer = this.getQuestionContainer();

  const sliderBar = questionContainer.querySelector('.bar');
  const sliderInput = questionContainer.querySelector('inpututype="hidden"]');
  const sliderHandle = questionContainer.querySelector('.trackHolderRel');

  function updateSliderColor(value) {
    if (value < 25) {
      sliderBar.style.backgroundColor = 'red';
      console.log("Slider color changed to red at value: " + value);
    } else if (value < 50) {
      sliderBar.style.backgroundColor = 'yellow';
      console.log("Slider color changed to yellow at value: " + value);
	} else if (value < 75) {
	  sliderBar.style.backgroundColor = 'green';
	  console.log("Slider color changed to green at value: " + value);
    } else {
      sliderBar.style.backgroundColor = 'blue';
      console.log("Slider color changed to blue at value: " + value);
    }
  }


function updateSlider() {
    let currentValue = parseInt(sliderInput.value, 10);
    if (!isNaN(currentValue)) {
      console.log(`updateSlider() called. Current value: ${currentValue}`);
      updateSliderColor(currentValue); 
    } else {
      console.error('Unable to retrieve slider value');
    }
  }

  // Event listener
  sliderHandle.addEventListener('mousemove', function() {
    updateSlider();
  });

  sliderHandle.addEventListener('click', function() {
    updateSlider();
  });


});

Qualtrics.SurveyEngine.addOnUnload(function() {

});

Hope thiss helps

Hi @Nam Nguyen 

Thank 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.kumar Only the filled part
 

I can understand how someone who only gets solutions and never contributes any would feel that way.

@TomG It could be that the person asking for help is a beginner and lacks the expertise to contribute, but does that justify someone using an open forum to promote and run their business? I have seen you several time selling your code here. 

Thank you @Nam Nguyen for 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);
});

I give people an option. When they take their own time into account, many people find it makes more sense for both economic and quality reasons to purchase a solution that works better than anything they could create themselves.   

พวกเขาสามารถสร้างเองได้นั้นสมเหตุสมผลมากกว่าทั้งในแง่เศรษฐกิจและคุณภาพ   

ซี