jQuery UI 滑块范围选项

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

    
        
        
        
        
        
        
  
        
            $(function () {
                $("#gfg").slider({ range: true });
            });
        
    
    
        GeeksforGeeks
        jQuery UI | slider range Option
        
    

输出：

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

HTML

    
        
        
        
        
        
        
        
            $(function () {
                $("#gfg").slider({ range: "max" });
            });
        
    
  
    
        GeeksforGeeks
        jQuery UI | slider range Option
        
    

输出：

示例 3：在此示例中，我们将使用字符串值作为min 。

HTML

    
        
        
        
        
        
        
        
            $(function () {
                $("#gfg").slider({ range: "min" });
            });
        
    
  
    
        GeeksforGeeks
        jQuery UI | slider range Option
        
    

输出：

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