Circular Pips

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");