滑块

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

导入#


import { Slider } from 'primereact/slider';

基本用法#

滑块用作受控输入，具有 value 和 onChange 属性。


<Slider value={value} onChange={(e) => setValue(e.value)} />

输入#

滑块通过双向绑定连接到输入字段。


<InputText value={value} onChange={(e) => setValue(e.target.value)} />
<Slider value={value} onChange={(e) => setValue(e.value)} />

步长#

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


<Slider value={value} onChange={(e) => setValue(e.value)} step={20} />

范围#

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


<Slider value={value} onChange={(e) => setValue(e.value)} range />

过滤器#

滑块用作受控输入，具有 value 和 onChange 属性。

对比度

亮度

棕褐色


<img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
<SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
<Slider
    value={filterValues[filter]}
    onChange={(e) => {
        const newFilterValues = [...filterValues];
        newFilterValues[filter] = e.value;
        setFilterValues(newFilterValues);
    }}
    className="w-14rem"
    min={0}
    max={200}
/>

垂直#

滑块的默认布局是水平，使用 orientation 属性来表示替代的垂直模式。


<Slider value={value} onChange={(e) => setValue(e.value)} orientation="vertical" />

无障碍#

屏幕阅读器

滑块元素组件除了 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 个步长。