基础 CSS 滑块数据绑定

Foundation CSS是 CSS 的前端框架，用于构建可在任何设备上完美运行的响应式网站、应用程序和电子邮件。它使用 HTML、CSS 和 Javascript 编写，并被许多著名公司使用，如 Amazon、Facebook、eBay 等。它使用 Grunt 和 Libsass 等包进行快速编码和控制，并使用 Saas 编译器加快开发速度。

Slider用于指定当我们向上/向下或向左/向右拖动滑块时的范围。我们可以通过拖动滑块的手柄来设置滑块上的任何值。滑块数据绑定用于将滑块与输入标签连接起来。当我们拖动手柄时，滑块值将实时显示在输入文本字段中。如果我们更改输入字段内的值，则滑块句柄将跳转到滑块上的给定值位置。在本文中，我们将讨论 Foundation CSS 中的滑块数据绑定。

基础 CSS 滑块数据绑定类：

• slider ：此类用于创建滑块。

句法：

示例 1：以下代码演示了 Slider 数据绑定。

HTML

    
  
    
  
  
  
  
  

  

   
     GeeksforGeeks 
  
     Foundation CSS Slider Data Binding 
    
    
  
      
        
          
          
          
          
        
      
  
      
        
      
    
  
    
  
    $(document).ready(function () {
      $(document).foundation();
    });
  

输出：

示例 2：以下代码演示了具有步长滑块的滑块数据绑定。

HTML

    
  
    
  
  
  
  
  
  

  

  
     GeeksforGeeks  
     Foundation CSS Slider Data Binding
    
    
      Step size: 10
    
    
      
        
          
          
          
          
        
      
  
      
        
      
    
  
    
      Step size: 8
    
    
      
        
          
          
          
          
        
      
      
        
      
    
  
    
  
    $(document).ready(function () {
      $(document).foundation();
    });
  

输出：

参考： https://get.foundation/sites/docs/slider.html#data-binding