API 浏览器
滑块

QSlider 组件非常适合用户指定介于最小值和最大值之间的数值,并在有效值之间提供可选的步长。滑块还具有焦点指示器(高亮的滑块按钮),允许使用键盘调整滑块。

¥The QSlider is a great way for the user to specify a number value between a minimum and maximum value, with optional steps between valid values. The slider also has a focus indicator (highlighted slider button), which allows for keyboard adjustments of the slider.

还要检查它的“兄弟”组件 QRange

¥Also check its “sibling”, the QRange component.

Loading QSlider API...

用法(Usage)

¥Usage

警告

你有责任调整 QSlider 周围的空间,以使标签和标记标签不会与页面上的其他内容重叠。你可以使用 CSS margin 或 padding 来实现此目的。

¥You are responsible for accommodating the space around QSlider so that the label and marker labels won’t overlap the other content on your page. You can use CSS margin or padding for this purpose.

标准式(Standard)

¥Standard

Standard



垂直(Vertical)

¥Vertical

Vertical orientation



带内部最小/最大按钮
v2.4+
(With inner min/max
v2.4+
)

¥With inner min/max

v2.4+

有时你需要将模型值限制在轨道长度内的某个区间内。为此,请使用 inner-mininner-max 属性。第一个 prop 需要大于或等于 min prop,而后者需要小于或等于 max prop。

¥Sometimes you need to restrict the model value to an interval inside of the track’s length. For this purpose, use inner-min and inner-max props. First prop needs to be higher or equal to min prop while the latter needs to be lower or equal to the max prop.

Inner min/max



带步骤(With step)

¥With step

With step



step 属性也可以是浮点数(如果需要无限精度,则为数字 0)。

¥The step property can also be floating point number (or numeric 0 if you need infinite precision).

Floating point



Snap to steps



带标签(With label)

¥With label

在以下示例中,移动滑块即可查看标签。

¥In the example below, move the slider to see the label.

With label



Always display label



Custom label value



下面的示例更好地展示了 QSlider 如何处理标签定位,使其始终水平保持在 QSlider 的框内。

¥The example below is better highlighting how QSlider handles label positioning so that it always stays inside the QSlider’s box horizontally.

Long label



标记(Markers)

¥Markers

Markers



标记标签
v2.4+
(Marker labels
v2.4+
)

¥Marker labels

v2.4+

Marker labels



关于插槽的提示

为了使用标记标签槽(见下文),你必须使用 marker-labels 属性启用它们。

¥In order to use the marker label slots (see below), you must enable them by using the marker-labels prop.

Marker label slots



其他自定义
v2.4+
(Other customizations
v2.4+
)

¥Other customizations

v2.4+

Color customizations



Hide selection bar



Custom track images



Track & thumb size



延迟输入(Lazy input)

¥Lazy input

Lazy input



空值(Null value)

¥Null value

Null value



反向(Reverse)

¥Reverse

In reverse



强制暗黑模式(Force dark mode)

¥Force dark mode

Force dark mode



只读并禁用(Readonly and disable)

¥Readonly and disable

Readonly



Disable



使用 QItem(With QItem)

¥With QItem

With QItem



原生表单提交(Native form submit)

¥Native form submit

处理具有 actionmethod 的原生表单时(例如,将 Quasar 与 ASP.NET 控制器结合使用时),你需要在 QSlider 上指定 name 属性,否则 formData 将不会包含它(如果应该包含的话):

¥When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QSlider, otherwise formData will not contain it (if it should):

Native form