Foundation CSS Slider 非线性值转换

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

当我们拖动滑块时， Slider用于指定值的范围。我们可以创建滑块来设置范围，用户可以通过拖动滑块来选择任何值。滑块 非线性值转换用于将重要值集中在滑块上。当滑块关注较高的值时，我们使用log类型的位置值函数，当滑块关注较低的值时，我们使用pow类型的位置值函数。在本文中，我们将讨论 Foundation CSS 中的 Slider 非线性值转换。

Foundation CSS Slider 非线性值转换属性：

• data-position-value-function：用于将重要值聚焦在滑块上。当我们为它分配一个log函数时，它将关注更高的值，当我们分配pow函数时，它将关注较低的值。

句法：

示例 1：以下代码演示了使用log函数的 Slider 非线性值转换。

HTML

  

    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            Foundation CSS Slider Non-linear value translation
        
        
            Using log function:
        
  
        
  
            
                
  
                    
                    
                
            
            
                
            
        
    
    
        $(document).ready(function () {
            $(document).foundation();
        });
    

  

输出：

Foundation CSS Slider 非线性值转换

示例 2：以下代码演示了使用pow函数的 Slider 非线性值转换。

HTML

  

    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            Foundation CSS Slider Non-linear value translation
        
        
            Using pow function:
        
        
            
                
  
                    
                    
                
            
            
                
            
        
    
    
        $(document).ready(function () {
            $(document).foundation();
        });
    

  

输出：

Foundation CSS Slider 非线性值转换

参考： https ://get.foundation/sites/docs/slider.html#non-linear-value-translation