📜  jQuery UI 滑块范围选项

📅  最后修改于: 2021-11-10 04:00:52             🧑  作者: Mango

jQuery UI 由使用 jQuery、CSS 和 HTML 实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 非常适合为网页构建 UI 界面。 jQuery UI 通过滑块小部件为我们提供了滑块控件。 Slider 帮助我们使用给定范围获得某个值。在本文中,我们将看到如何在滑块中设置范围选项。 range选项用于设置滑块的范围。

句法:

$(".selector").slider(
   { range : 'string' | boolean}
);

参数:此选项接受两个参数,如下所述。

  • 字符串 :要设置的滑块范围。可用值为最小值、最大值
  • boolean:如果设置为true ,则滑块有两个手柄。默认情况下,该值为false

CDN 链接:首先,添加任务所需的 jQuery UI 脚本 CDN 链接。

下面的示例说明了 jQuery UI 滑块范围选项:

示例 1:在此示例中,我们将使用布尔值并且设置为true

HTML


    
        
        
        
        
  
        
    
    
        

GeeksforGeeks

        

jQuery UI | slider range Option

        
    


HTML


    
        
        
        
        
        
    
  
    
        

GeeksforGeeks

        

jQuery UI | slider range Option

        
    


HTML


    
        
        
        
        
        
    
  
    
        

GeeksforGeeks

        

jQuery UI | slider range Option

        
    


输出:

示例 2:在此示例中,我们将使用字符串值并设置为max

HTML



    
        
        
        
        
        
    
  
    
        

GeeksforGeeks

        

jQuery UI | slider range Option

        
    

输出:

示例 3:在此示例中,我们将使用字符串值作为min

HTML



    
        
        
        
        
        
    
  
    
        

GeeksforGeeks

        

jQuery UI | slider range Option

        
    

输出:

参考: https : //api.jqueryui.com/slider/#option-range