jQuery UI |滑块

Jquery UI 中的滑块函数可用于选择数字数据作为用户的输入。 Slider 在网页上有很多应用，比如用它来控制音量、颜色选择器、控制各种图像的大小和分辨率等。我们将在代码中使用 CDN 链接来添加不同的库和样式。要像任何其他 jQuery UI 小部件一样显示此滑块，我们必须链接到 jQuery 和 jQuery UI。将此代码复制到您的 HTML 文件中，以通过 CDN（内容交付网络）将该文件链接到 jquery 和 jquery UI。这里我们使用了 google 的 CDN，但您也可以使用 jquery 或 Microsoft 的 CDN

连接到 jQuery UI 后，我们现在可以在我们的网页上使用滑块函数。就像任何其他 jQuery 代码一样，滑块函数也写在 HTML 文档的脚本标签内。
下面的示例将说明jQuery UI 滑块
例子：

    jQuery UI| Slider
    
    
        h1 {
            color: green;
        }
          
        div {
            width: 400px;
        }
    

  

    
        GeeksforGeeks
        JQuery UI slide
        
        
  
        
            $(document).ready(function() {
                $(function() {
                    $("#my_slider").slider({
                        slide: function(event, ui) {
                            $("#my_display").html(ui.value);
                        }
                    });
                });
            })
        
        
        
        
        
    

  

输出：

管理滑块的不同属性：我们可以控制滑块的不同属性，例如步长、方向、最小值、最大值。下面是我们为这些属性分配值的示例。

例子：

  

    
    
    
    
    
    
    
        h1 {
            color: green;
        }
    

  

    
        GeeksforGeeks
        JQuesry UI slide
        
        
  
        
            $(document).ready(function() {
  
                $(function() {
                    $("#my_slider").slider({
                        min: 0,
                        max: 100,
                        step: 2,
                        orientation: "vertical",
                        slide: function(event, ui) {
                            $("#my_display").html(ui.value);
                        }
                    });
                });
            })
        
  

输出：

处理滑块的事件：这里是一个滑块的三个事件的例子，一个在滑块的开始，第二个是滑块移动时，第三个是滑块停止时。我们可以在我们的这些事件（函数）中使用我们需要的代码应用程序。

例子：

    Handling events of Slider
    
  
    
        h1 {
            color: green;
        }
          
        div {
            width: 400px;
        }
    

  

    
        GeeksforGeeks
        JQuesry UI slide
        
        
        
        
        
  
        
            $(document).ready(function() {
  
                $(function() {
                    $("#my_slider").slider({
                        slide: function(event, ui) {
                            $("#my_display").html(ui.value);
                            $("#my_display_event").html('Slider on move...');
                        },
                        start: function(event, ui) {
                            $("#my_display_event").html('Slider Started...');
                        },
                        stop: function(event, ui) {
                            $("#my_display_event").html('Slider Stopped...');
                        }
                    });
                });
  
            })
        
        
        
        
        
    
  

  

输出：

使用滑块选择一组数字：我们还可以通过使用滑块的起始值和使用另一个滑块的停止值来选择一组数字。
例子：

  

    Handling events of Slider
    
  
    
        h1 {
            color: green;
        }
          
        div {
            width: 400px;
        }
    

  

    
        GeeksforGeeks
        JQuesry UI slide
        
        
        
        
        
  
        
            $(document).ready(function() {
  
                $(function() {
                    $("#my_slider").slider({
                        min: 0,
                        max: 100,
                        values: [10, 30],
                        range: true,
                        slide: function(event, ui) {
                            $("#my_display_start").html("Start value:" + ui.values[0]),
                                $("#my_display_end").html("End value:" + ui.values[1]);
                        }
                    });
                });
  
            })
        
        
        
        
        
    
  

  

输出：

启用/禁用滑块：我们可以通过在输入法中指定滑块来启用或禁用滑块。在下面的示例中，我们使用一对单选按钮来启用/禁用滑块。单击相应的单选按钮时，会收集值（变量名称为 my_val）并相应地设置滑块的状态。
例子：

  

    Enabling/Disabling a Slider
    
        h1 {
            color: green;
        }
          
        div {
            width: 400px;
        }
    

  

    
        GeeksforGeeks
        JQuesry UI slide
        Enable
        Disable
        
        
        
  
        
        
        
  
        
            $(document).ready(function() {
  
                $(function() {
                    $("#my_slider").slider({
                        slide: function(event, ui) {
                            $("#my_display").html(ui.value);
                        }
                    });
                });
  
                ///Reading radio button values using change event//
                $("input[type='radio']").change(function() {
                    my_val = $("input[name=radio_1]:checked").val()
                    $("#my_slider").slider(my_val);
                })
  
            })
        
    

  

输出