如何在jqueryUI滑塊中添加PIPS滑塊

Question

我需要在JqueryUI滑塊中添加6個點子。 PIPS的範圍從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。爲了得到點子的參考下面的鏈接

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