For a slider question I would like to have the backgroundcolor like the below displayed example:
!
How can this be created?
Best answer by Anonymous
View original
Color transition in slider bar
Userlevel 3
+5
Hello,
For a slider question I would like to have the backgroundcolor like the below displayed example:
!
How can this be created?
For a slider question I would like to have the backgroundcolor like the below displayed example:
!
How can this be created?
A
Hello @Nico_Leussink ,
This is for Slider(Draggable sliders) question type.
Paste the following code in the Look and feel-> Advanced-> add custom css
.Skin .horizontalbar .Slider .track {
background-image: linear-gradient(-90deg,red,yellow,green);
}
Output:
!
This is for Slider(Draggable sliders) question type.
Paste the following code in the Look and feel-> Advanced-> add custom css
.Skin .horizontalbar .Slider .track {
background-image: linear-gradient(-90deg,red,yellow,green);
}
Output:
!
Userlevel 3
+5
Thank you @Shashi,
This helps a lot, but is it also possible to set this by each individual bar? In some situations I would like to have it from green to red and in some situations I would like to have it from red to green.
This helps a lot, but is it also possible to set this by each individual bar? In some situations I would like to have it from green to red and in some situations I would like to have it from red to green.
A
Hello @Nico_Leussink ,
Remove the code from the "add custom css"
Paste the following code in the slider question -> Add java script Js(onReady)
var that=this.questionId;
jQuery(".track:eq(0)").css({ "background-image":"linear-gradient(-90deg,red,yellow,green)"});
If you want to give some other color to choice 2 slider of the same question then just copy the second line of above code and change eq(0) to eq(1), similarly to n number of sliders
Example:
Code
var that=this.questionId;
jQuery(".track:eq(0)").css({ "background-image":"linear-gradient(-90deg,red,yellow,green)"});
jQuery(".track:eq(1)").css({ "background-image":"linear-gradient(-90deg,green,yellow,red)"});
o/p
!
Remove the code from the "add custom css"
Paste the following code in the slider question -> Add java script Js(onReady)
var that=this.questionId;
jQuery(".track:eq(0)").css({ "background-image":"linear-gradient(-90deg,red,yellow,green)"});
If you want to give some other color to choice 2 slider of the same question then just copy the second line of above code and change eq(0) to eq(1), similarly to n number of sliders
Example:
Code
var that=this.questionId;
jQuery(".track:eq(0)").css({ "background-image":"linear-gradient(-90deg,red,yellow,green)"});
jQuery(".track:eq(1)").css({ "background-image":"linear-gradient(-90deg,green,yellow,red)"});
o/p
!
Userlevel 3
+5
Thank you @Shashi,
One last question on this which just came up to me.
I have a section where respondents can set a value to the sliders.
In a second page (the previous button is turned off) I would like to display the result in the same questiontype, set the default value to the previous question and set this to read only so the respondent can't change the value. How can I set this question to read only?
One last question on this which just came up to me.
I have a section where respondents can set a value to the sliders.
In a second page (the previous button is turned off) I would like to display the result in the same questiontype, set the default value to the previous question and set this to read only so the respondent can't change the value. How can I set this question to read only?
Leave a Reply
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.