滑块

滑块是一个提供带有拖动手柄的输入的组件。

导入 #


import Slider from 'primevue/slider';

基本 #

滑块与 v-model 属性一起使用，用于双向值绑定。


<Slider v-model="value" class="w-56" />

表单 #

滑块与 PrimeVue 表单库无缝集成。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
    <div class="flex flex-col gap-4">
        <Slider name="slider" />
        <Message v-if="$form.slider?.invalid" severity="error" size="small" variant="simple">{{ $form.slider.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

输入 #

滑块使用双向绑定连接到输入字段。


<InputText v-model.number="value" />
<Slider v-model="value" />

步长 #

每次移动的大小由 step 属性定义。


<Slider v-model="value" :step="20" class="w-56" />

范围 #

当存在 range 属性时，滑块提供两个手柄来定义两个值。在范围模式下，值应为数组而不是单个值。


<Slider v-model="value" range class="w-56" />

过滤器 #

使用多个滑块的图像过滤器实现。


<img alt="user header" class="w-full md:w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" :style="filterStyle" />
<SelectButton v-model="filter" :options="filterOptions" optionLabel="label" optionValue="value" class="mb-4" />
<Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />

垂直 #

滑块的默认布局是水平，对于替代的垂直模式，请使用 orientation 属性。


<Slider v-model="value" orientation="vertical" class="h-56" />

可访问性 #

屏幕阅读器

滑块元素组件在手柄上使用 slider 角色，此外还使用了 aria-orientation、aria-valuemin、aria-valuemax 和 aria-valuenow 属性。可以使用 aria-labelledby 和 aria-label 属性定义描述组件的值。


<span id="label_number">Number</span>
<Slider aria-labelledby="label_number" />

<Slider aria-label="Number" />

键盘支持

键	功能
tab	将焦点移动到滑块。
左箭头上箭头	减小值。
右箭头下箭头	增大值。
home	设置最小值。
end	设置最大值。
page up	将值增加 10 步。
page down	将值减小 10 步。

滑块