如何在jqueryUI滑块中添加PIPS

Question

I need to add 6 pips in JqueryUI slider. The PIPS wopuld range from 2000, 2010, 2020, 2030, 2040, 2050. I'm unable to get the understand functionality of adding these pips. Also, currently the slider has been coded to work on step sliding effect. Here is the code I'm using:

    <div id="slider"></div>
    <script>
    $(function() {

var extensionMethods = {

            pips: function( settings ) {

                options = {

                    first:  "number",   // "pip" , false
                    last:   "number",   // "pip" , false
                    rest:   "pip"       // "number" , false

                };

                $.extend( options, settings );

                // get rid of all pips that might already exist.
                this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();

                // we need teh amount of pips to create.
                var pips = this.options.max - this.options.min;                 

                    // for every stop in the slider, we create a pip.
                    for( i=0; i<=pips; i++ ) {

                        // hold a span element for the pip
                        var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');

                        // add a class so css can handle the display
                        // we'll hide numbers by default in CSS, and show them if set.
                        // we'll also use CSS to hide the pip altogether.
                        if( 0 == i ) {
                            s.addClass('ui-slider-pip-first');
                            if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
                            if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
                        } else if ( pips == i ) {
                            s.addClass('ui-slider-pip-last');
                            if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
                            if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
                        } else {
                            if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
                            if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
                        }


                        // if it's a horizontal slider we'll set the left offset,
                        // and the top if it's vertical.
                        if( this.options.orientation == "horizontal" ) 
                            s.css({ left: '' + (100/pips)*i + '%'  });
                        else
                            s.css({ top: '' + (100/pips)*i + '%'  });


                        // append the span to the slider.
                        this.element.append( s );

                    }

            }


        };

        $.extend(true, $['ui']['slider'].prototype, extensionMethods);


        $("#slider").slider({
            min: 0,
            max: 600,
            step: 100,


            // on slide adjust width of all rects
            slide: function(event, ui) {

                svg.selectAll("rect")
                        .attr("width", function (d) {

Answer 1

Well JQuery-UI slider doesn't have pip's by default. To get pip's refer to the link below

https://github.com/simeydotme/jQuery-ui-Slider-Pips