Javascript 如何在jqueryUI滑块中添加PIP

我需要在JqueryUI滑块中添加6个点。PIPS wopuld的范围为2000年、2010年、2020年、2030年、2040年和2050年。我无法理解添加这些PIP的功能。此外，目前滑块已编码为使用阶梯滑动效果。以下是我正在使用的代码：

    <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) {

$（函数（）{
变量扩展方法={
pips：功能（设置）{
选项={
第一个：“数字”/“pip”，假
最后：“数字”/“pip”，假
其余：“pip”/“数字”，假
};
$.extend（选项、设置）；
//清除所有可能已经存在的PIP。
this.element.addClass（'ui-slider-pips'）.find（'.ui-slider-pip'）.remove（）；
//我们需要大量的点子来创造。
var pips=this.options.max-this.options.min；
//对于滑块中的每个停止，我们都创建一个点。
对于（i=0；iWell），jQueryUI滑块在默认情况下没有pip。要获得pip，请参阅下面的链接

您需要正确使用插件，请参考文档：）