<div id="alternating-slider"></div>
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");