Range

Form Components 表单组件
Slider 滑块
Form Components 表单组件
Field 字段

QRange 组件可以让用户在最小值和最大值之间选择一个子范围的值，还可以通过可选的步骤来选择这些值。Range 组件的一个示例用例是提供价格范围选择。

也看看另一个相似的组件：QSlider 。

QRange API

QRange API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单时很有用
snap
: Boolean
说明
根据有效值进行捕捉，而不是自由滑动；建议：与 'step' 属性一起使用
reverse
: Boolean
说明
逆向工作（改变方向）
vertical
: Boolean
说明
在垂直方向显示
label-always
: Boolean
说明
始终显示标签

用法

请注意，我们为每一个组件使用一个对象，该对象包含选定范围的最小值 rangeValues.min 和最大值 rangeValues.max。

标准

WARNING

您需要调整 QRange 周围的空间，以便标签和标记标签不会与页面上的其他内容重叠。您可以为此使用 CSS 边距或填充。

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ standard.min }} to {{ standard.max }} (0 to 50)
    </q-badge>

    <q-range
      v-model="standard"
      :min="0"
      :max="50"
    />
    <q-range
      v-model="standard"
      :min="0"
      :max="50"
      color="green"
    />
  </div>
</template>
Model: 10 to 35 (0 to 50)

垂直

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ standard.min }} to {{ standard.max }} (0 to 50)
    </q-badge>

    <div class="row justify-around">
      <q-range
        v-model="standard"
        :min="0"
        :max="50"
        vertical
        label
        switch-label-side
      />

      <q-range
        v-model="standard"
        :min="0"
        :max="50"
        color="green"
        vertical
        label-always
      />
    </div>
  </div>
</template>
Model: 10 to 35 (0 to 50)
10
35
10
35

内部的最大/最小值
v2.4+

有时您需要将模型值限制为轨迹长度内的范围。您可以通过 inner-min 和 inner-max 属性来实现，前者需要大于等于 min 属性，后者需要小于等于 max 属性。

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ model.min }} to {{ model.max }} (0 to 50 w/ selection 10 to 35 or 15 to 40)
    </q-badge>

    <q-range v-model="model" :min="0" :max="50" :inner-min="10" :inner-max="35" />
    <q-range v-model="model" :min="0" :max="50" color="green" :inner-min="15" :inner-max="40" />
  </div>
</template>
Model: 20 to 25 (0 to 50 w/ selection 10 to 35 or 15 to 40)

离散值

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ step.min }} to {{ step.max }} (0 to 45, step 5)
    </q-badge>

    <q-range
      v-model="step"
      :min="0"
      :max="45"
      :step="5"
      label
      color="deep-orange"
    />
  </div>
</template>
Model: 10 to 20 (0 to 45, step 5)
10
20

step 属性也可以是一个浮点数（或者数字 0 如果您需要无效小的精度）。

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ precision.min }} to {{ precision.max }} (0.1 to 1.5)
    </q-badge>

    <q-range
      v-model="precision"
      :min="0.1"
      :max="1.5"
      :step="0.1"
      color="green"
    />

    <q-badge color="secondary">
      Model: {{ zeroPrecision.min }} to {{ zeroPrecision.max }} (0.1 to 1.5)
    </q-badge>

    <q-range
      v-model="zeroPrecision"
      :min="0.1"
      :max="1.5"
      :step="0"
      color="amber"
    />
  </div>
</template>
Model: 0.2 to 0.7 (0.1 to 1.5)
Model: 0.2 to 0.7 (0.1 to 1.5) 
<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ snap.min }} to {{ snap.max }} (0 to 20, step 2)
    </q-badge>

    <q-range
      v-model="snap"
      :min="0"
      :max="20"
      :step="2"
      label
      snap
    />
  </div>
</template>
Model: 2 to 12 (0 to 20, step 2)
2
12

带有标签

在下面的示例中，移动滑块以查看标签。

<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ label.min }} to {{ label.max }} (-20 to 20, step 4)
    </q-badge>

    <q-range
      v-model="label"
      :min="-20"
      :max="20"
      :step="4"
      label
      color="purple"
    />
  </div>
</template>
Model: -12 to 8 (-20 to 20, step 4)
-12
8
<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ label.min }} to {{ label.max }} (-20 to 20, step 4)
    </q-badge>

    <q-range
      v-model="label"
      :min="-20"
      :max="20"
      :step="4"
      label-always
      color="brown"
    />
  </div>
</template>
Model: -12 to 8 (-20 to 20, step 4)
-12
8
<template>
  <div class="q-pa-md q-pb-lg">
    <q-badge color="secondary" class="q-mb-sm">
      Model: {{ model.min }} to {{ model.max }} (-20 to 20, step 4)
    </q-badge>

    <q-range
      v-model="model"
      :min="-20"
      :max="20"
      :step="4"
      :left-label-value="model.min + 'px'"
      :right-label-value="model.max + 'px'"
      label-always
      switch-label-side
      color="purple"
    />
  </div>
</template>
Model: -12 to 8 (-20 to 20, step 4)
-12px
8px

下面的示例演示如何处理标签的定位，以使其始终水平地保持在 QRange 的框内。

<template>
  <div class="q-pa-md">
    <q-range
      v-model="model"
      :min="-20"
      :max="20"
      :step="4"
      :left-label-value="'Value: ' + model.min + 'px'"
      :right-label-value="'Value: ' + model.max + 'px'"
      label-always
      color="purple"
    />
  </div>
</template>
Value: -16px
Value: 16px

标记

<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ marker.min }} to {{ marker.max }} (-6 to 10, step 2)
    </q-badge>

    <q-range
      v-model="marker"
      :min="-6"
      :max="10"
      :step="2"
      label
      markers
      color="orange"
    />

    <q-range
      v-model="marker"
      :min="-6"
      :max="10"
      :step="2"
      label
      snap
      markers
      color="purple"
    />

    <q-badge color="secondary">
      Model: {{ orangeModel }}<br>(0 to 16, step 2, marker step 4)
    </q-badge>
    <q-range
      v-model="orangeModel"
      :min="-8"
      :max="16"
      :step="2"
      label
      snap
      :markers="4"
      color="orange"
    />
  </div>
</template>
Model: 6 to 8 (-6 to 10, step 2)
6
8
6
8
Model: { "min": 6, "max": 10 }
(0 to 16, step 2, marker step 4)
6
10

标记标签
v2.4+

<template>
  <div class="q-px-lg q-pt-md q-pb-xl">
    <q-range
      v-model="model"
      marker-labels
      :min="0"
      :max="6"
    />

    <q-range
      class="q-mt-xl"
      v-model="model"
      color="deep-orange"
      markers
      :marker-labels="fnMarkerLabel"
      :min="0"
      :max="6"
    />

    <q-range
      class="q-mt-xl"
      v-model="model"
      color="purple"
      markers
      :marker-labels="objMarkerLabel"
      :min="0"
      :max="6"
    />

    <q-range
      class="q-mt-xl"
      v-model="priceModel"
      color="green"
      :inner-min="3"
      :inner-max="6"
      markers
      :marker-labels="arrayMarkerLabel"
      label-always
      :left-label-value="minPriceLabel"
      :right-label-value="maxPriceLabel"
      switch-label-side
      switch-marker-labels-side
      :min="2"
      :max="7"
    />
  </div>
</template>
0
1
2
3
4
5
6
0%
10%
20%
30%
40%
50%
60%
0°C
3°C
5°C
6°C
$3
$4
$5
$6
$ 4
$ 6

TIP on slots

为了使用标记标签插槽(参见下面) ，您必须使用 marker-labels 来启用它们。

<template>
  <div class="q-px-lg q-pt-md q-pb-xl">
    <q-range
      class="q-mt-xl"
      v-model="firstModel"
      color="deep-orange"
      label-always
      markers
      marker-labels
      :min="1"
      :max="10"
      :inner-min="2"
      :inner-max="8"
    >
      <template v-slot:marker-label-group="scope">
        <div
          v-for="marker in scope.markerList"
          :key="marker.index"
          :class="[ `text-deep-orange-${2 + Math.ceil(marker.value / 2) }`, marker.classes ]"
          :style="marker.style"
          @click="model = marker.value"
        >{{ marker.value }}</div>
      </template>
    </q-range>

    <q-range
      class="q-mt-xl"
      v-model="secondModel"
      color="orange"
      markers
      :min="0"
      :max="5"
      marker-labels
      switch-marker-labels-side
    >
      <template v-slot:marker-label-group="{ markerList }">
        <div
          v-for="val in 4"
          :key="val"
          :class="markerList[val].classes"
          :style="markerList[val].style"
        >{{ val }}</div>

        <q-icon
          v-for="val in [0, 5]"
          :key="val"
          :class="markerList[val].classes"
          :style="markerList[val].style"
          size="sm"
          color="orange"
          :name="val === 0 ? 'volume_off' : 'volume_up'"
        />
      </template>
    </q-range>

    <q-range
      class="q-mt-xl"
      v-model="thirdModel"
      color="teal"
      :left-thumb-color="thirdModel.min === 0 ? 'grey' : 'teal'"
      :right-thumb-color="thirdModel.max === 5 ? 'black' : 'teal'"
      snap
      :min="0"
      :max="5"
      :step="0.5"
      vertical
      marker-labels
    >
      <template v-slot:marker-label-group="{ markerMap }">
        <div
          class="row items-center no-wrap"
          :class="markerMap[thirdModel.min].classes"
          :style="markerMap[thirdModel.min].style"
        >
          <q-icon
            v-if="thirdModel.min === 0"
            size="xs"
            color="teal"
            name="star_outline"
          />

          <template v-else>
            <q-icon
              v-for="i in Math.floor(thirdModel.min)"
              :key="i"
              size="xs"
              color="teal"
              name="star_rate"
            />

            <q-icon
              v-if="thirdModel.min > Math.floor(thirdModel.min)"
              size="xs"
              color="teal"
              name="star_half"
            />
          </template>
        </div>

        <div
          class="row items-center no-wrap"
          :class="markerMap[thirdModel.max].classes"
          :style="markerMap[thirdModel.max].style"
        >
          <q-icon
            v-for="i in Math.floor(thirdModel.max)"
            :key="i"
            size="xs"
            color="teal"
            name="star_rate"
          />

          <q-icon
            v-if="thirdModel.max > Math.floor(thirdModel.max)"
            size="xs"
            color="teal"
            name="star_half"
          />
        </div>
      </template>
    </q-range>
  </div>
</template>
2
4
1
2
3
4
5
6
7
8
9
10
1
2
3
4

其他的自定义选项
v2.4+

<template>
  <div class="q-pa-lg">
    <q-range
      v-model="model"
      color="orange"
      thumb-color="purple"
      label-color="black"
      label-text-color="yellow"
      markers
      marker-labels
      switch-marker-labels-side
      label-always
      switch-label-side
      :min="0"
      :max="6"
    />

    <q-range
      class="q-mt-xl"
      v-model="model"
      color="orange"
      left-thumb-color="purple-3"
      left-label-color="green"
      right-thumb-color="purple-8"
      right-label-color="black"
      markers
      marker-labels
      switch-marker-labels-side
      label-always
      switch-label-side
      :min="0"
      :max="6"
    />

    <q-range
      class="q-mt-xl"
      v-model="secondModel"
      color="green"
      track-color="orange"
      inner-track-color="transparent"
      selection-color="red"
      :max="10"
      markers
    />

    <q-range
      v-model="secondModel"
      color="purple"
      inner-track-color="light-blue-3"
      :max="10"
      :inner-min="2"
      :inner-max="8"
      markers
    />

    <q-range
      v-model="secondModel"
      color="teal"
      track-color="light-blue-2"
      inner-track-color="light-blue-5"
      :max="10"
      :inner-min="2"
      :inner-max="8"
      markers
    />
  </div>
</template>
0
1
2
3
4
5
6
2
4
0
1
2
3
4
5
6
2
4
<template>
  <div class="q-px-lg q-py-md">
    <q-range
      v-model="model"
      :min="0"
      :max="10"
      markers
      selection-color="transparent"
    />

    <q-range
      v-model="model"
      :min="0"
      :max="10"
      track-color="orange"
      inner-track-color="transparent"
      selection-color="transparent"
      markers
    />
  </div>
</template>
<template>
  <div class="q-pa-lg">
    <q-range
      v-model="model"
      color="deep-orange"
      :max="10"
      track-size="8px"
      track-color="grey-2"
      inner-track-color="transparent"
      selection-color="transparent"
      :track-img="img"
    />

    <q-range
      v-model="model"
      color="deep-orange"
      :max="10"
      track-size="8px"
      track-color="white"
      inner-track-color="transparent"
      :track-img="img"
    />

    <q-range
      v-model="model"
      color="deep-orange"
      :max="10"
      track-size="8px"
      inner-track-color="transparent"
      :selection-img="img"
    />

    <q-range
      v-model="model"
      color="deep-orange"
      :max="10"
      :inner-min="2"
      :inner-max="8"
      track-size="8px"
      inner-track-color="white"
      :inner-track-img="img"
      selection-color="transparent"
    />
  </div>
</template>
<template>
  <div class="q-px-lg q-py-md">
    <q-range
      v-model="model"
      :min="0"
      :max="10"
      color="green"
      track-size="10px"
      thumb-color="black"
      markers
    />

    <q-range
      v-model="model"
      :min="0"
      :max="10"
      color="green"
      thumb-size="35px"
      markers
    />
  </div>
</template>

可拖拽的范围

使用 drag-range 或 drag-only-range 属性允许用户移动所选范围或仅移动预定的范围。

<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ range.min }} to {{ range.max }} (0 to 100, step 1)
    </q-badge>

    <q-range
      v-model="range"
      :min="0"
      :max="100"
      label
      drag-range
    />
  </div>
</template>
Model: 20 to 65 (0 to 100, step 1)
20
65
<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ rangeSnap.min }} to {{ rangeSnap.max }} (0 to 100, step 5)
    </q-badge>

    <q-range
      v-model="rangeSnap"
      :min="0"
      :max="100"
      :step="5"
      drag-range
      label
      markers
      snap
      color="lime"
    />
  </div>
</template>
Model: 35 to 60 (0 to 100, step 5)
35
60
<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ onlyRange.min }} to {{ onlyRange.max }} (0 to 100, step 5)
    </q-badge>

    <q-range
      v-model="onlyRange"
      :min="0"
      :max="100"
      :step="5"
      drag-only-range
      label
      color="info"
    />
  </div>
</template>
Model: 10 to 35 (0 to 100, step 5)
10
35

懒输入

<template>
  <div class="q-pa-md">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ lazy.min }} to {{ lazy.max }} (0 to 50, step 1)
    </q-badge>

    <q-range
      :model-value="lazy"
      @change="val => { lazy = val }"
      :min="0"
      :max="50"
      label
    />
  </div>
</template>
Model: 10 to 35 (0 to 50, step 1)
10
35

懒输入

<template>
  <div class="q-pa-md">
    <q-badge color="primary" class="q-mb-lg">
      Model: {{ getNullLabel(bothNull.min) }} to {{ getNullLabel(bothNull.max) }} (0 to 50, step 1)
    </q-badge>

    <q-range
      v-model="bothNull"
      color="primary"
      :min="0"
      :max="50"
    />

    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ getNullLabel(minNull.min) }} to {{ getNullLabel(minNull.max) }} (0 to 50, step 1)
    </q-badge>

    <q-range
      v-model="minNull"
      color="secondary"
      :min="0"
      :max="50"
    />

    <q-badge color="accent" class="q-mb-lg">
      Model: {{ getNullLabel(maxNull.min) }} to {{ getNullLabel(maxNull.max) }} (0 to 50, step 1)
    </q-badge>

    <q-range
      v-model="maxNull"
      color="accent"
      :min="0"
      :max="50"
    />
  </div>
</template>
Model: null to null (0 to 50, step 1)
Model: null to 40 (0 to 50, step 1)
Model: 20 to null (0 to 50, step 1)

反向

<template>
  <div class="q-pa-md">
    <q-badge color="secondary">
      Model: {{ standard.min }} to {{ standard.max }} (0 to 50)
    </q-badge>

    <q-range
      reverse
      v-model="standard"
      :min="0"
      :max="50"
    />
    <q-range
      reverse
      v-model="standard"
      :min="0"
      :max="50"
      color="green"
    />
  </div>
</template>
Model: 5 to 15 (0 to 50)

黑色, 只读, 禁用

<template>
  <div class="q-pa-md bg-grey-10 text-white">
    <q-badge color="secondary" class="q-mb-lg">
      Model: {{ model.min }} to {{ model.max }} (0 to 50)
    </q-badge>

    <q-range
      v-model="model"
      :min="0"
      :max="50"
      dark
    />
    <q-range
      v-model="model"
      :min="0"
      :max="50"
      color="green"
      dark
    />
  </div>
</template>
Model: 10 to 35 (0 to 50) 
<template>
  <div class="q-pa-md">
    <q-range
      v-model="standard"
      color="secondary"
      :min="0"
      :max="50"
      readonly
    />
  </div>
</template>
<template>
  <div class="q-pa-md">
    <q-range
      v-model="standard"
      color="secondary"
      :min="0"
      :max="50"
      disable
    />
  </div>
</template>

搭配 QItem

<template>
  <div class="q-pa-md">
    <q-list dense>
      <q-item>
        <q-item-section avatar>
          <q-icon name="local_atm" />
        </q-item-section>
        <q-item-section>
          <q-range
            v-model="model"
            :min="0"
            :max="50"
            label
          />
        </q-item-section>
      </q-item>

      <q-item>
        <q-item-section avatar>
          <q-icon name="euro_symbol" />
        </q-item-section>
        <q-item-section>
          <q-range
            v-model="model"
            :min="0"
            :max="50"
            label
          />
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>
10
35
10
35

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QRange 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <div class="q-mt-xl">
        <q-range
          name="price_range"
          v-model="range"
          label-always
        />
      </div>

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card v-if="submitResult.length > 0" flat bordered class="q-mt-md bg-grey-2">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
10
50
查看更多？
Form Components 表单组件
Slider 滑块
Form Components 表单组件
Time Picker 时间选择器
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。