<div id="circles-slider"></div>
Here's a quick example showing that it's possible to move the pips
inside the slider area.
We've given them a thicker, rounded appearance with a minimal feel. Also the first
and last
pips
are positioned at the beginning and end of the slider, respectively.
— Be sure to check out the css to see how it's done!
<div id="circles-slider"></div>
#circles-slider.ui-slider { border-radius: 20px; background: #434d5a; border: none; height: 10px; margin: 1em 4em 4em; } #circles-slider .ui-slider-handle { border-radius: 23px; height: 23px; width: 23px; top: -7px; margin-left: -11px; border: 2px solid #fffaf7; } #circles-slider .ui-slider-pip { top: 3px; } #circles-slider .ui-slider-pip .ui-slider-line { width: 4px; height: 4px; border-radius: 4px; margin-left: -2px; background: #fffaf7; } #circles-slider .ui-slider-pip.ui-slider-pip-last, #circles-slider .ui-slider-pip.ui-slider-pip-first { top: -7px; } #circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line, #circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line { display: none; } #circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label, #circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label { margin: 0; } #circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label { left: -2em; text-align: right; } #circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label { left: 2em; text-align: left; } #circles-slider .ui-slider-pip.ui-slider-pip-selected-initial { font-weight: normal; } #circles-slider .ui-slider-pip.ui-slider-pip-selected { font-weight: bold; } #circles-slider .ui-slider-pip.ui-slider-pip-selected, #circles-slider .ui-slider-pip.ui-slider-pip-selected-initial { color: #434d5a; }
$("#circles-slider") .slider({ max: 10, value: 5 }) .slider("pips");