滑块

QSlider 是用户指定最小值和最大值之间的数值的好方法，滑块还有一个焦点指示器（突出显示的滑块按钮），可以通过键盘调整滑块。

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

QSlider API

props

slots

events

behavior

content

general

model

state

style

name

: String

说明

用于指定控件的名称；如果处理直接提交到 URL 的表单时很有用

snap

: Boolean

说明

根据有效值进行捕捉，而不是自由滑动；建议：与 'step' 属性一起使用

reverse

: Boolean

说明

逆向工作（改变方向）

vertical

: Boolean

说明

在垂直方向显示

label-always

: Boolean

说明

始终显示标签

用法

WARNING

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

标准

Model: 2 (0 to 50)

垂直

Model: 10 (0 to 50)

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

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

Model: 25 (0 to 50 w/ selection 10 to 35 or 15 to 40)

离散值

Model: 50 (0 to 100, step 50)

Model: 25 (0 to 100, step 25)

Model: 2 (0 to 5, step 1)

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

Model: 0.3 (0.1 to 1.5, step 0.1)

Model: 0.53 (0.1 to 1, step 0.05)

Model: 0.5 (0.0 to 10.5, step 0)

Model: 0 (-20 to 20)

带有标签

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

Model: 0 (-20 to 20, step 4)

0px

Model: 0 (-20 to 20, step 4)

0px

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

Value: 16px

标记

Model: 2 (0 to 10)

Model: 0 (0 to 10)

Model: 6 (0 to 16, step 2, marker step 4)

标记标签
v2.4+

10%

20%

30%

40%

50%

60%

0°C

3°C

5°C

6°C

$ 4

TIP on slots

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

Template

Script

All

<template>
  <div class="q-px-lg q-pt-md q-pb-xl">
    <q-slider
      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-slider>

    <q-slider
      class="q-mt-xl"
      v-model="secondModel"
      color="orange"
      markers
      :min="0"
      :max="5"
      marker-labels
    >
      <template v-slot:marker-label-group="{ markerList }">
        <div
          v-for="val in 4"
          :key="val"
          class="cursor-pointer"
          :class="markerList[val].classes"
          :style="markerList[val].style"
          @click="secondModel = val"
        >{{ 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'"
          @click="secondModel = val"
        />
      </template>
    </q-slider>

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

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

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

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

懒输入

Model: 6

Null 值

Model: null (step 1)

Model: null (10 to 70, step 1, inner 20 to 55)

反向

Model: 2 (0 to 50)

黑色, 只读, 禁用

Model: 0 (-20 to 20, step 4)

搭配 QItem

原生表单提交

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

类型定义

interface SliderMarkerLabelPartialDefinition {
  label?: number | string;
  classes?: VueClassProp;
  style?: VueStyleObjectProp;
}

interface SliderMarkerLabelDefinition
  extends SliderMarkerLabelPartialDefinition {
  value?: number;
}

interface SliderMarkerLabelDefinitionRequiredValue
  extends SliderMarkerLabelPartialDefinition {
  value: number;
}

interface SliderMarkerLabelObjectDefinition {
  [value: number]: string | SliderMarkerLabelDefinition;
}

export type SliderMarkerLabels =
  | boolean
  | Array<SliderMarkerLabelDefinitionRequiredValue>
  | SliderMarkerLabelObjectDefinition
  | ((value: number) => string | SliderMarkerLabelDefinition);



export type SliderMarkerLabelConfig = {
  index: number;
  value: number;
  label: number | string;
  classes: string;
  style: VueStyleObjectProp;
};

export type SliderMarkerLabelArrayConfig = SliderMarkerLabelConfig[];

export interface SliderMarkerLabelObjectConfig {
  [value: number]: SliderMarkerLabelConfig;
}

发现了一处错误？帮助改进提交问题

鄂ICP备2022014971号-1

免责声明本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。

滑块

QSlider API

用法

标准

垂直

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

离散值

带有标签

标记

标记标签 v2.4+

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

懒输入

Null 值

反向

黑色, 只读, 禁用

搭配 QItem

原生表单提交

类型定义

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

标记标签
v2.4+

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