滑桿

滑桿是一個提供帶有拖曳控制點的輸入組件。

匯入 #


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" />

協助工具 #

螢幕閱讀器

滑桿元素組件除了 aria-orientation、aria-valuemin、aria-valuemax 和 aria-valuenow 屬性之外，還在控制點上使用 slider 角色。可以使用 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 個步進。

滑桿