📌  相关文章
📜  ionic 范围

📅  最后修改于: 2021-01-03 04:53:19             🧑  作者: Mango

ionic 范围

ionic 范围滑块用于通过移动滑块来选择和显示值的级别。默认情况下，只有一个旋钮控制范围的值，但它也可以接受双旋钮。

范围标签

通过将属性slot =“ start”和slot = “ end”添加到元素，可以将标签放置在范围的两侧。

最大值和最小值

可以分别通过使用max和min属性在范围内传递最大值和最小值。默认情况下，该范围已设置min = 0和max = 0值。

步骤和快照

steps属性用于指定范围值的值粒度。当值的增量不是1时，此功能很有用。如果将step属性设置在范围内，它将在范围内为每个步骤显示刻度线。 snap属性用于根据step属性值将旋钮自动移动到最近的刻度线。

双旋钮

如果在范围组件上将double-knobs属性设置为true ，则将启用范围上的两个旋钮。这意味着该值将是一个包含两个属性的对象： lower和upper 。

我们可以从以下示例中了解 ionic 范围。

例


  
    
      RangeExample
    
  


  
    
      Adjust Display

输出：

将图标添加到范围

图标用于清晰显示数据。我们可以在范围元素的两侧将图标放置在范围输入之前和之后。以下示例显示范围内图标的使用。

例


  
    
      RangeExample
    
  


  
    
      Adjust Display

输出：

造型范围

我们还可以使用color属性设置范围的样式。以下示例显示了将颜色与 ionic 范围分量一起使用的方法。

例


  
    
      RangeExample
    
  


    
      
        Adjust Display

输出：