Scale Slider

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