Slider question change of color change of selected part. | XM Community
Skip to main content
Solved

Slider question change of color change of selected part.


Forum|alt.badge.img+3

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.

Best answer by Nam Nguyen

harendra.kumar wrote:

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
 

 

View original

11 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • September 12, 2024

@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.


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 12 replies
  • September 12, 2024

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.


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • QPN Level 8 ●●●●●●●●
  • 1082 replies
  • September 12, 2024

@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('input[type="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


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 12 replies
  • September 12, 2024

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. 


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • QPN Level 8 ●●●●●●●●
  • 1082 replies
  • Answer
  • September 12, 2024
harendra.kumar wrote:

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
 

 


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • September 12, 2024
harendra.kumar wrote:

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.

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


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 12 replies
  • September 13, 2024

@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. 


Forum|alt.badge.img+3
  • Author
  • Level 2 ●●
  • 12 replies
  • September 13, 2024

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);
});


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5804 replies
  • September 16, 2024
harendra.kumar wrote:

@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. 

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.   


chaloemkhompitoon
Forum|alt.badge.img+1

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

 

 

ซี


chaloemkhompitoon
Forum|alt.badge.img+1

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


Leave a Reply