Format Shown Values of Slider Choices

1ag01ag0 Community Member Qubie ✭

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

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

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

Answers

  • 1ag01ag0 Community Member Qubie ✭

    Hey TomG,

    Thank you! This worked! Quick follow-up, is there a way to apply this to some sliders but not others?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

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

  • 1ag01ag0 Community Member Qubie ✭

    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?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

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

  • 1ag01ag0 Community Member Qubie ✭

    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?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

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

Sign In to Comment