5% Interval

If we have more than 100 items on the slider (max - min >= 100), then the .slider("pips"); method will only show the pips at a 5% interval. This is because we really do not want to be adding thousands of dom elements to the page for the pips. It can have a dramatic effect on performance for the user. Additionally every pip requires it's own pixel on the screen... so if we had more than 1000 pips, we would need a screen size of at least 1000px wide.

</>
{;}
($)
            <div class="slider"></div>
        
            #steps-fivepercent-slider .ui-slider-tip {
                visibility: visible;
                opacity: 1;
                top: -30px;
            }
        
            $(".slider")

                .slider({ 
                    min: 0, 
                    max: 1000, 
                    range: true, 
                    values: [200, 800] 
                })

                .slider("pips", {
                    rest: "label"
                })

                .slider("float");