<div id="double-label-slider"></div>
One of the users of the pips
plugin popped up on Github and asked for some info
on how to add more than one label (above and below the slider) on
issue #77. It was a
good question, and a nice solution, so it's posted here for teaching purposes.
Basically we just supply custom html
for the labels and then style it up.
Look at the jQuery to see how it's done!
<div id="double-label-slider"></div>
#double-label-slider.ui-slider { margin-top: 24px; height: 6px; background: #dddddd; border: none; border-radius: 0; } #double-label-slider.ui-slider .ui-slider-handle { background: #25daa5; border: none; width: 18px; height: 18px; margin-left: -9px; border-radius: 100%; transition: box-shadow 0.2s ease; } #double-label-slider.ui-slider .ui-slider-handle.ui-state-hover, #double-label-slider.ui-slider .ui-slider-handle.ui-state-focus, #double-label-slider.ui-slider .ui-slider-handle.ui-state-active { box-shadow: 0 0 0 2px #25daa5; } #double-label-slider.ui-slider .ui-slider-pip { top: -3px; } #double-label-slider.ui-slider .ui-slider-pip .ui-slider-line { background: white; width: 12px; height: 12px; margin-left: -6px; box-shadow: 0 0 0 2px #25daa5; border-radius: 100%; transition: all 0.4s ease; } #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label, #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i, #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span { width: 100px; margin-left: -50px; text-align: center; } #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label { color: #888888; } #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i { font-style: normal; font-size: 1.8em; position: absolute; top: -36px; } @media screen and (max-width: 500px) { #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label i { font-size: 1.4em; } } #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span { opacity: 0.6; font-size: 1.2em; line-height: 1.3; position: absolute; top: 18px; transition: opacity 0.3s ease; } @media screen and (max-width: 500px) { #double-label-slider.ui-slider .ui-slider-pip .ui-slider-label span { font-size: 1.1em; } } #double-label-slider.ui-slider .ui-slider-pip:hover .ui-slider-label span, #double-label-slider.ui-slider .ui-slider-pip:focus .ui-slider-label span, #double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label span { opacity: 1; } #double-label-slider.ui-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label { color: black; }
var doubleLabels = [ "<i>-2</i><span>I hated it</span>", "<i>-1</i><span>I was displeased</span>", "<i>0</i><span>I have no feelings</span>", "<i>+1</i><span>I liked it</span>", "<i>+2</i><span>I am easily excited</span>" ]; $("#double-label-slider") .slider({ max: 2, min: -2, value: 0, animate: 400 }) .slider("pips", { rest: "label", labels: doubleLabels });