Alternating Labels

We create a slider with many labels and handles which would be crushed together with no space to read them usually. So also we use some clever CSS3 to set the :nth-child(even) pips to float upwards instead; creating this attractive alternating effect. We also add some nice colors and label effects to show which pips are selected. — Be sure to check out the css to see how it's done!

</>
{;}
($)
                <div id="alternating-slider"></div>
            
                #alternating-slider .ui-slider-pip .ui-slider-line {
                  height: 8px;
                  top: -5px; }
                
                #alternating-slider .ui-slider-pip:nth-child(even) {
                  top: -33px;
                  height: 15px;
                  transform: scale(0.8) translateY(3px);
                  opacity: 0.8; }
                  
                  #alternating-slider .ui-slider-pip:nth-child(even) .ui-slider-line {
                    top: 22px;
                    height: 9px; }
                  
                  #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-1 .ui-slider-label, 
                  #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-2 .ui-slider-label, 
                  #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-3 .ui-slider-label, 
                  #alternating-slider .ui-slider-pip:nth-child(even).ui-slider-pip-selected-4 .ui-slider-label {
                    top: -3px; }

                #alternating-slider .ui-slider-pip-initial-1 .ui-slider-label {
                  color: #E80949; }

                #alternating-slider .ui-slider-pip-initial-2 .ui-slider-label {
                  color: #FF03CB; }

                #alternating-slider .ui-slider-pip-initial-3 .ui-slider-label {
                  color: #C309E8; }

                #alternating-slider .ui-slider-pip-initial-4 .ui-slider-label {
                  color: #920AFF; }

                #alternating-slider .ui-slider-pip-selected-1 .ui-slider-label,
                #alternating-slider .ui-slider-pip-selected-2 .ui-slider-label,
                #alternating-slider .ui-slider-pip-selected-3 .ui-slider-label,
                #alternating-slider .ui-slider-pip-selected-4 .ui-slider-label {
                  color: white;
                  width: 2.4em;
                  padding: 4px 0;
                  margin-left: -1.2em;
                  border-radius: 2px; }

                #alternating-slider .ui-slider-pip-selected-1 .ui-slider-label {
                  background-color: #E80949; }

                #alternating-slider .ui-slider-pip-selected-2 .ui-slider-label {
                  background-color: #FF03CB; }

                #alternating-slider .ui-slider-pip-selected-3 .ui-slider-label {
                  background-color: #C309E8; }

                #alternating-slider .ui-slider-pip-selected-4 .ui-slider-label {
                  background-color: #920AFF; }

                #alternating-slider .ui-slider-tip {
                  width: 34px;
                  margin-left: -17px;
                  top: -1px;
                  background: #00c7d7;
                  color: white;
                  border: none;
                  line-height: 27px;
                  height: 25px; }

                  #alternating-slider .ui-slider-tip:before, 
                  #alternating-slider .ui-slider-tip:after {
                    display: none; }

                #alternating-slider .ui-slider-handle.ui-state-active .ui-slider-tip,
                #alternating-slider .ui-slider-handle.ui-state-focus .ui-slider-tip,
                #alternating-slider .ui-slider-handle.ui-state-hover .ui-slider-tip,
                #alternating-slider .ui-slider-handle:focus .ui-slider-tip,
                #alternating-slider .ui-slider-handle:hover .ui-slider-tip {
                  top: -1px; }

                #alternating-slider .ui-slider-handle.ui-state-focus {
                  z-index: 100; }

            
                $("#alternating-slider")
                  .slider({
                      max: 1000,
                      values: [0, 300, 700, 1000]
                  })
                  .slider("pips", {
                      step: 25,
                      rest: "label",
                      labels: { first: "Min", last: "Max" }
                  })
                  .slider("float");