<div id="scale-slider"></div>
We have an example, here, of a slider set up with a range and in the pips
plugin we tell
it to use labels
for every single value (-50
~ 50
) but we've hidden all the labels with
display:none;
and then used css3 :nth-of-type(10n+3)
to show every
10th label
— Be sure to check out the css to see how it's done!
<div id="scale-slider"></div>
#scale-slider.ui-slider { border-radius: 0px; background: #c7cdd5; border: none; height: 2px; margin: 1em 4em 4em; } #scale-slider.ui-slider .ui-slider-range { background: linear-gradient(to right, #434d5a 0%, #00c7d7 50%, #434d5a 100%) border: 1px solid rgba(67, 77, 90, 0.5); height: 4px; top: -1px; transition: all 0.2s ease-out; } #scale-slider .ui-slider-handle { border-radius: 2px; height: 20px; width: 12px; top: -26px; border: none; } #scale-slider .ui-slider-handle:nth-of-type(n+1) { transform: rotateZ(-10deg); margin-left: -9px; } #scale-slider .ui-slider-handle:nth-of-type(n+2) { transform: rotateZ(10deg); margin-left: -3px; } #scale-slider .ui-slider-handle:after { content: ""; border: 6px solid transparent; width: 0; height: 0; position: absolute; bottom: -11px; border-top-color: #434d5a; } #scale-slider .ui-slider-handle.ui-slider-handle.ui-state-focus:after, #scale-slider .ui-slider-handle.ui-slider-handle.ui-state-hover:after, #scale-slider .ui-slider-handle.ui-slider-handle.ui-state-active:after { border-top-color: #00c7d7; } #scale-slider .ui-slider-pip { top: 2px; } #scale-slider .ui-slider-pip .ui-slider-label { display: none; background: rgba(67, 77, 90, 0); color: #434d5a; border-radius: 4px; padding: 0.3em 0; width: 2.4em; margin-left: -1.2em; transition: all 0.2s ease-out; } #scale-slider .ui-slider-pip .ui-slider-line { height: 4px; } #scale-slider .ui-slider-pip:nth-of-type(5n+3) .ui-slider-line { height: 8px; } #scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-line { height: 12px; } #scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-label { top: 16px; display: block; } #scale-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line { margin-left: -1px; } #scale-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label, #scale-slider .ui-slider-pip.ui-slider-pip-selected-first .ui-slider-label, #scale-slider .ui-slider-pip.ui-slider-pip-selected-second .ui-slider-label { background: rgba(67, 77, 90, 0.7); color: #fffaf7; }
$("#scale-slider") .slider({ max: 50, min: -50, values: [-20, 20], range: true }) .slider("pips", { rest: "label" });