范围滑块

范围滑块布局

单范围

单范围滑块布局相当简单：

<!-- Range Slider element -->
<div class="range-slider">
  <!-- range input -->
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

双范围

双范围滑块更简单，因为它不需要输入元素，因为 input:range 不支持双范围：

<!-- Range Slider element -->
<div class="range-slider"></div>

范围滑块颜色

范围滑块支持所有默认颜色之一所以要更改其颜色，只需向范围滑块元素添加 color-[color] 类。

<!-- red range -->
<div class="range-slider color-red">...</div>

<!-- orange range -->
<div class="range-slider color-orange">...</div>

范围滑块应用方法

让我们看看与范围滑块相关的方法：

app.range.create(参数)- 创建范围滑块实例

参数 - 对象. 带有范围滑块参数的对象

方法返回创建的范围滑块的实例

app.range.destroy(el)- 销毁范围滑块实例

el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的范围滑块元素或范围滑块实例。

app.range.get(el)- 通过 HTML 元素获取范围滑块实例

el - HTMLElement或字符串(使用 CSS 选择器)。范围滑块元素。

方法返回范围滑块的实例

app.range.getValue(el)- 获取范围滑块值

el - HTMLElement或字符串(使用 CSS 选择器)。范围滑块元素。

方法返回范围滑块值

app.range.setValue(el, 值)- 设置新的范围滑块值

el - HTMLElement或字符串(使用 CSS 选择器)。范围滑块元素。
值 - 数字(对于单范围)或数组值 (对于双范围)

方法返回范围滑块的实例

范围滑块参数

现在让我们看看创建范围滑块所需的可用参数列表：

参数	类型	默认	描述
el	HTMLElement 字符串		范围滑块元素。HTMLElement 或范围滑块元素的 CSS 选择器
inputEl	HTMLElement 字符串		范围滑块输入元素或输入元素的 CSS 选择器。如果未指定，将尝试在范围滑块元素内部查找`input type="range"` inside of range slider element
双	布尔值	false	启用双范围滑块
step	数字	1	值之间的最小步长
label	布尔值	false	启用范围滑块旋钮周围的附加标签
formatLabel	函数(值)		方法必须返回格式化的范围旋钮标签文本。作为参数接收标签值
min	数字		最小值
max	数字		最大值
值	数字数组		初始值。单范围的数字，双范围的值数组
draggableBar	布尔值	true	启用后，也可以通过点击和滑动范围条来交互范围滑块（更改值）
垂直	布尔值	false	启用垂直范围滑块
verticalReversed	布尔值	false	使垂直范围滑块反转 (`vertical`push
scale	布尔值	false	启用范围滑块刻度
scaleSteps	数字	5	刻度步数
scaleSubSteps	数字	0	刻度子步数（每个步长将被此值除）
formatScaleLabel	函数 (值)		方法必须返回格式化的刻度值。作为参数接收当前刻度步长值。此方法将对每个刻度步长调用。
limitKnobPosition	布尔值		将旋钮位置限制在范围条的大小内。默认情况下从 iOS 主题启用
on	对象		带有事件处理程序的对象。例如： `var range = app.range.create({ el: '.range-slider', on: { change: function () { console.log('Range Slider value changed') } } })`

范围滑块方法 & 属性

所以要创建范围滑块，我们必须调用：

var range = app.range.create({ /* parameters */ })

之后我们就有其初始化的实例（如range示例中上面的变量）以及有用的方法和属性：

属性
range.app	链接到全局应用实例
range.el	范围滑块 HTML 元素
range.$el	带有范围滑块 HTML 元素的 Dom7 实例
range.inputEl	范围滑块输入 HTML 元素
range.$inputEl	带有范围滑块输入 HTML 元素的 Dom7 实例
range.rangeWidth	范围滑块宽度 (以像素为单位)
range.dual	布尔属性指示是否为双范围
range.min	范围最小值
range.max	范围最大值
range.value	范围值
range.scale	布尔属性指示是否启用`scale` is enabled or not
range.scaleSteps	刻度步数
range.scaleSubSteps	标尺子步数
range.$scaleEl	带有生成的标尺 HTML 元素的 Dom7 实例
range.knobs	每个元素表示创建的范围滑块旋钮的 HTMLElement 的数组 (双滑块为 2 个旋钮)
range.labels	每个元素表示创建的范围滑块旋钮标签的 HTMLElement 的数组 (双滑块为 2 个标签)
range.vertical	布尔属性指示是否为垂直
range.verticalReversed	布尔属性指示是否为垂直且反转
range.params	范围滑块参数
方法
range.getValue()	返回范围滑块值
range.setValue(值)	设置新的范围滑块值
range.updateScale()	重新计算并重新渲染滑块标尺
range.destroy()	销毁范围滑块实例
range.on(事件上触发, 处理程序)	添加事件处理程序
range.once(事件上触发, 处理程序)	添加在触发后将被移除的事件处理程序
range.off(事件上触发, 处理程序)	移除事件处理程序
range.off(事件上触发)	移除指定事件的所有处理程序
range.emit(事件上触发, ...args)	在实例上触发事件

范围滑块事件

范围滑块将在范围元素上触发以下 DOM 事件，并在应用和范围滑块实例上触发事件：

DOM 事件

事件	Target	描述
range:change	范围滑块元素<div class="range-slider">	当范围滑块值更改时，将触发此事件
range:changed	范围滑块元素<div class="range-slider">	在滑块旋钮释放并更改值后，将触发此事件
range:beforedestroy	范围滑块元素<div class="range-slider">	事件将在范围滑块实例销毁之前触发

应用和范围滑块实例事件

范围滑块实例在自身实例和应用程序实例上发出事件。应用程序实例事件具有以 range 前缀命名相同名称range.

事件	参数	Target	描述
change	(range, value)	范围	当范围值发生变化时将触发事件。作为参数，事件处理程序接收范围实例
rangeChange	(range, value)	app	当范围值发生变化时将触发事件。作为参数，事件处理程序接收范围实例
改变	(range, value)	范围	当滑块旋钮在值变化后释放时将触发事件。作为参数，事件处理程序接收范围实例
rangeChanged	(range, value)	app	当滑块旋钮在值变化后释放时将触发事件。作为参数，事件处理程序接收范围实例
beforeDestroy	(range)	范围	当范围滑块实例销毁之前将触发事件。作为参数，事件处理程序接收范围实例
rangeBeforeDestroy	(range)	app	当范围滑块实例销毁之前将触发事件。作为参数，事件处理程序接收范围实例

范围滑块自动初始化

如果你不需要使用范围滑块 API，并且你的范围滑块在页面中，并且在页面初始化时在 DOM 中呈现，那么它可以通过仅添加额外的range-slider-init class:

<!-- Add range-slider-init class -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

来自动初始化app.range.get app method:

var range = app.range.get('.range-slider');

if (range.value > 50) {
  // do something
}

当使用自动初始化时，你可能需要传递额外的参数。这可以通过两种方式完成：

In you case you use single-range slider and you have input:range inside, thenstep, min, max, value参数可以从此输入属性中设置：

<!-- min, max, step, value parameters will be set for same input attributes -->
<div class="range-slider range-slider-init">
  <input type="range" min="0" max="100" step="1" value="10" />
</div>

Otherwise, if you don't have input:range inside or you use dual range input you can set all available parameters viadata-attributes on range slider element.

<!-- parameters set via data- attributes -->
<div
  class="range-slider range-slider-init"
  data-min="0"
  data-max="100"
  data-step="10"
  data-label="true"
  data-value="50"
></div>

在双范围滑块的情况下，你需要使用data-value-left和data-value-right属性指定所有参数来自动初始化：

<!-- parameters set via data- attributes -->
<div
  class="range-slider range-slider-init"
  data-dual="true"
  data-min="0"
  data-max="100"
  data-step="10"
  data-label="true"
  data-value-left="30"
  data-value-right="60"
></div>

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

注意，注释掉的变量默认未指定，其值在这种情况下是它们回退到的值。

:root {
  /*
  --f7-range-bar-active-bg-color: var(--f7-theme-color);
  --f7-range-scale-bg-color: var(--f7-range-bar-bg-color);
  --f7-range-scale-substep-bg-color: var(--f7-range-bar-bg-color);
  */
  --f7-range-scale-step-height: 5px;
  --f7-range-scale-substep-width: 1px;
  --f7-range-scale-substep-height: 4px;
  --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
}
:root .dark,
:root.dark {
  --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
}
.ios {
  --f7-range-size: 28px;
  --f7-range-bar-size: 4px;
  --f7-range-bar-border-radius: 2px;
  --f7-range-knob-size: 28px;
  --f7-range-knob-color: #fff;
  --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  --f7-range-label-size: 24px;
  --f7-range-label-text-color: #000;
  --f7-range-label-bg-color: #fff;
  --f7-range-label-font-size: 12px;
  --f7-range-label-font-weight: 500;
  --f7-range-label-border-radius: 5px;
  --f7-range-label-padding: 0px 2px;
  --f7-range-scale-text-color: #666;
  --f7-range-scale-step-width: 1px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md {
  --f7-range-size: 20px;
  --f7-range-bar-size: 2px;
  --f7-range-bar-border-radius: 0px;
  --f7-range-knob-size: 12px;
  --f7-range-knob-box-shadow: none;
  --f7-range-label-size: 26px;
  --f7-range-label-font-weight: normal;
  --f7-range-label-font-size: 10px;
  --f7-range-label-border-radius: 50%;
  --f7-range-label-padding: 0px;
  --f7-range-scale-step-width: 2px;
  --f7-range-scale-font-size: 12px;
  --f7-range-scale-font-weight: 400;
  --f7-range-scale-label-offset: 4px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-range-knob-color: var(--f7-theme-color);
  --f7-range-label-text-color: var(--f7-md-on-primary);
  --f7-range-label-bg-color: var(--f7-theme-color);
  --f7-range-scale-text-color: var(--f7-md-on-surface-variant);
}

示例

range.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Range Slider</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Volume</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">speaker_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_mute</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init">
                <input type="range" min="0" max="100" step="1" value="10" />
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">speaker_3_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">volume_up</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Brightness</div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">sun_min</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_low</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-orange" data-label="true">
                <input type="range" min="0" max="100" step="1" value="50" />
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">sun_max_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">brightness_high</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title display-flex justify-content-space-between">
        Price Filter <span class="price-value">$${priceMin} - $${priceMax}</span>
      </div>
      <div class="list list-strong-ios list-outline-ios simple-list">
        <ul>
          <li class="item-row">
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle</i>
              <i class="icon material-icons md-only" style="width: 24px">attach_money</i>
            </div>
            <div style="width: 100%; margin: 0 16px">
              <div class="range-slider range-slider-init color-green" @range:change=${onPriceChange} data-label="true"
                data-dual="true" data-min="0" data-max="500" data-step="1" data-value-left="200" data-value-right="400">
              </div>
            </div>
            <div>
              <i class="icon f7-icons if-not-md" style="width: 28px">money_dollar_circle_fill</i>
              <i class="icon material-icons md-only" style="width: 24px">monetization_on</i>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">With Scale</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="range-slider range-slider-init" data-min="0" data-max="100" data-label="true" data-step="5"
          data-value="25" data-scale="true" data-scale-steps="5" data-scale-sub-steps="4"></div>
      </div>
      <div class="block-title">Vertical</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init margin-right" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="25" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="50" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-horizontal" data-vertical="true" data-min="0" data-max="100"
          data-label="true" data-step="1" data-value="75" style="height: 160px"></div>
        <div class="range-slider range-slider-init margin-left" data-dual="true" data-vertical="true" data-min="0"
          data-max="100" data-label="true" data-step="1" data-value-left="25" data-value-right="75"
          style="height: 160px"></div>
      </div>
      <div class="block-title">Vertical Reversed</div>
      <div class="block block-strong-ios block-outline-ios display-flex justify-content-center">
        <div class="range-slider range-slider-init color-red margin-right" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="25"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="50"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-horizontal" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value="75"
          style="height: 160px"></div>
        <div class="range-slider range-slider-init color-red margin-left" data-dual="true" data-vertical="true"
          data-vertical-reversed="true" data-min="0" data-max="100" data-label="true" data-step="1" data-value-left="25"
          data-value-right="75" style="height: 160px"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $el, $update }) => {
    let priceMin = 200;
    let priceMax = 400;

    const onPriceChange = (e) => {
      const range = $f7.range.get(e.target);
      priceMin = range.value[0];
      priceMax = range.value[1];
      $update();
    };

    return $render;
  };
</script>

改进此文档

在本页上

范围滑块布局

单范围
双范围

范围滑块颜色
范围滑块应用方法
范围滑块参数
范围滑块方法 & 属性
范围滑块事件

DOM 事件
应用和范围滑块实例事件

范围滑块自动初始化
CSS 变量
示例