jQuery UI |用于选择数字数据的微调器

jQuery UI 中的 Spinner 用于通过使用箭头键或使用向上/向下按钮来增加或减少值。此微调器用于数字输入。
我们将在代码中使用 CDN 链接来添加不同的库和样式。要像任何其他 jQuery UI 小部件一样显示此日历，我们必须链接到 jQuery 和 jQuery UI。这是一个带有所有 HTML 标签的简单代码，用于显示微调器。您只需复制此代码即可显示微调器。

示例 1：

      

    
        jQuery UI | Spinner to select numeric data
    
      
    
          
    
    
      
    
    

  

      
    
        GeeksforGeeks
    
      
    
        jQuery UI | Spinner to
        select numeric data
    
    
          
    
    $(document).ready(function() {
        $( "#spinner" ).spinner();
    });
    

  

输出：

默认值：用于设置输入框的默认值。

示例 2：

      

    
        jQuery UI | Spinner to select numeric data
    
      
    
          
    
    
      
    
    

  

      
    
        GeeksforGeeks
    
      
    
        jQuery UI | Spinner to
        select numeric data
    
    
          
    
    $(document).ready(function() {
        $( "#spinner" ).spinner();
        $( "#spinner" ).val(500)
    });
    

  

输出：

最大值和最小值：可以设置微调器的上下限。

$(document).ready(function() {
    $( "#spinner" ).spinner({
        max: 20,
        min: -10
    });
});

页面值：我们可以通过页面值设置Page up 或Page down 键按钮值的值。

$(document).ready(function() {
    $( "#spinner" ).spinner({
        page:50
    });
});

步长值：我们可以使用步长设置向上箭头或向下箭头键按钮值的值。

$(document).ready(function() {
    $( "#spinner" ).spinner({
        step:10
    });
});