如何在 jqueryUI Slider 中添加 PIPS

Question

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

    <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

好吧 JQuery-UI 滑块默认没有 pip。要获取 pip，请参考下面的 link

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

如何在 jqueryUI Slider 中添加 PIPS

how to add PIPS in jqueryUI Slider

javascript

jquery

jquery-ui

jquery-ui-slider