<div class="slider"></div>
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.