Solved
Format Shown Values of Slider Choices
I have sliders with selected values displayed on the left hand side. I would like those displayed values to be bold, and also add a "%" sign after the displayed values.
How do you format the displayed slider values so that they are bolded and is followed by a % sign?
Best answer by TomG
> @1ag0 said:
> I have sliders with selected values displayed on the left hand side. I would like those displayed values to be bold, and also add a "%" sign after the displayed values.
>
> How do you format the displayed slider values so that they are bolded and is followed by a % sign?
Do you mean the right hand side? (as in a Non-mobile friendly Slider or a Constant Sum slider). CSS:
```
.Skin .horizontalbar table.sliderGrid tr td.value input[type=text] {
font-weight:bold;
width:2.1em;
}
.Skin .horizontalbar table.sliderGrid tr td.value:not(:first-of-type)::after {
content: "%";
font-weight: bold;
}
```
+27> @1ag0 said:
> I have sliders with selected values displayed on the left hand side. I would like those displayed values to be bold, and also add a "%" sign after the displayed values.
>
> How do you format the displayed slider values so that they are bolded and is followed by a % sign?
Do you mean the right hand side? (as in a Non-mobile friendly Slider or a Constant Sum slider). CSS:
```
.Skin .horizontalbar table.sliderGrid tr td.value input[type=text] {
font-weight:bold;
width:2.1em;
}
.Skin .horizontalbar table.sliderGrid tr td.value:not(:first-of-type)::after {
content: "%";
font-weight: bold;
}
```
Hey TomG,
Thank you! This worked! Quick follow-up, is there a way to apply this to some sliders but not others?
+27> @1ag0 said:
> Hey TomG,
>
> Thank you! This worked! Quick follow-up, is there a way to apply this to some sliders but not others?
Instead of putting it in the Look & Feel, put it inside a `<style>` tag in the question text on the page(s) where you want a slider to be formatted this way.
Many thanks for this!
Quick follow-up, the values are displayed, but they are being cut-off on the right-hand side. Is there a way to adjust it so that display values are not being cut off?
+27> @1ag0 said:
> Many thanks for this!
> Quick follow-up, the values are displayed, but they are being cut-off on the right-hand side. Is there a way to adjust it so that display values are not being cut off?
It is somewhat theme dependent. You can try making width:2.1em; a bit bigger, but if you make it too big it will wrap.
TomG,
Thanks for your reply! I have been playing around with the width, but as you said the slider values skips to the next line. Is there a way to disable the wrapping or is there a way to expand the content area?
+27> @1ag0 said:
> TomG,
>
> Thanks for your reply! I have been playing around with the width, but as you said the slider values skips to the next line. Is there a way to disable the wrapping or is there a way to expand the content area?
Yes, but I think you would be going down the rabbit hole with that approach. As easier solution would be to un-bold or reduce the size of the font.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.