Prefix / Suffix

If we need to add some content/context to our values, we can specify a prefix and/or suffix to spice things up. It would not be possible with css :before and :after because we already use these psuedo-elements for styling.

</>
{;}
($)
                <div class="slider"></div>
            
                /* Because of the prefix/suffix we need to shift the labels left
                    a little bit so they are still aligned centrally. */

                #prefix-suffix-slider .ui-slider-label {
                  margin-left: -1.75em; 
                }
                
                /* We also use a media query so the pips do not crowd-over each other
                    when we get to a small screen size */

                @media screen and (max-width: 1040px) {
                    #prefix-suffix-slider .ui-slider-pip:nth-of-type(2n+1) .ui-slider-label {
                        display: none; 
                    } 
                }
            
                $(".slider")
                    .slider({ 
                        min: 0, 
                        max: 100, 
                        value: 50, 
                        step: 10 
                    })
                    .slider("pips", {
                        rest: "label",
                        prefix: "$",
                        suffix: ".00¢"
                    });
            

Check out the CSS & JS code, and also try resizing the browser to see the slider respond.