范围

范围-Bootstrap 5和Material Design 2.0表格

范围是一个交互式组件,它使用户可以快速滑动到可能的值 扩展到所需范围。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

创建自定义 <input type="range"> 与控制 .form-range. 轨道(背景)和拇指(值)的样式均在整个方向上显示为相同 浏览器。由于只有Firefox支持从拇指的左侧或右侧“填充”其轨迹 作为直观显示进度的一种方式,我们目前不支持它。


          <label class="form-label" for="customRange1">Example range</label>
          <div class="range">
            <input type="range" class="form-range" id="customRange1" />
          </div>
        

残障人士

在输入上添加 disabled 布尔属性,使其外观呈灰色 并删除指针事件。


          <label class="form-label" for="customRange1">Example range</label>
          <div class="range">
            <input type="range" class="form-range" id="customRange1" disabled />
          </div>
        

最小和最大

范围输入具有 min max - 0 100 。您可以使用 min max 属性。


          <label class="form-label" for="customRange2">Example range</label>
          <div class="range">
            <input type="range" class="form-range" min="0" max="5" id="customRange2" />
          </div>
        

脚步

默认情况下,范围输入“快照”为整数值。要更改此设置,您可以指定一个 step 值。在下面的示例中,我们通过使用 step =“ 0.5”


          <label for="customRange3" class="form-label">Example range</label>
          <div class="range">
            <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3" />
          </div>
        

范围 - API


用法

通过JavaScript


        const range = new mdb.Range(document.getElementById('range'));
      

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

 $('#range').range('init'); 

方法

Name Description Example
init Initialize a range instance myRange.init()
dispose Disposes a range instance myRange.dispose()
getInstance Static method which allows you to get the range instance associated with a DOM element. mdb.Range.getInstance(element)

          const range = document.getElementById('range');
          const rangeInstance = mdb.Range.getInstance(range);
          rangeInstance.dispose();
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


        import { Range } from 'mdb-ui-kit';