基础 CSS 滑块两个手柄

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面，使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件，可以在任何设备上阅读。应用程序基础允许您构建完全响应的 Web 应用程序。

当我们拖动滑块时， Slider用于指定值的范围。滑块两个手柄意味着滑块有两个拖动手柄，我们可以拖动两个手柄。双手柄滑块用于定义一系列值与单个给定值。我们可以创建水平和垂直双手柄滑块。要制作两个手柄滑块，请使用两个具有滑块手柄类的元素和两个输入元素。

在本文中，我们将讨论如何在 Foundation CSS 中创建双手柄滑块。

基础 CSS 滑块两个句柄类：

• 滑块句柄：用于创建滑块句柄。

句法：

  
      
      
      ...

示例 1：以下代码演示了带有两个手柄的水平滑块。

HTML

  

    
    
  
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
  
        Foundation CSS Slider Two Handles
  
        
              
            
            
            
  
            
            
              
            
            
        
    
  
    
        $(document).ready(function () {
            $(document).foundation();
        });
    

  

输出：

示例 2：以下代码演示了带有两个手柄的垂直滑块。

HTML

  

    
    
  
    
    
    
  
    
    

  

    
        
            GeeksforGeeks
        
          
        Foundation CSS Slider Two Handles
  
        
  
            
            
              
            
              
            
            
            
            
        
    
  
    
        $(document).ready(function () {
            $(document).foundation();
        });
    

  

输出：

参考： https://get.foundation/sites/docs/slider.html#two-handles