import Slider from 'primevue/slider';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"></script>
Two-way binding is defined using the standard v-model directive.
<Slider v-model="value" />
Range slider provides two handles to define two values. Enable range property and bind an array to implement a range slider.
<Slider v-model="value" :range="true" />
export default {
data() {
return {
value: [20,80]
}
}
}
Default layout of slider is horizontal, use orientation property for the alternative vertical mode.
<Slider v-model="value" orientation="vertical" />
Step factor is 1 by default and can be customized with step option.
<Slider v-model="value" :step="20" />
Boundaries are specified with min and max attributes.
<Slider v-model="value" :step="20" :min="50" :max="200" />
Any valid attribute is passed to the root element implicitly, extended properties are as follows;
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | number | 0 | Value of the component. |
| min | number | 0 | Mininum boundary value. |
| max | number | 100 | Maximum boundary value. |
| orientation | string | horizontal | Orientation of the slider, valid values are horizontal and vertical. |
| step | number | 1 | Step factor to increment/decrement the value. |
| range | boolean | false | When speficed, allows two boundary values to be picked. |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| tabindex | number | null | Index of the element in tabbing order. |
| Name | Parameters | Description |
|---|---|---|
| change | value: Selected option value | Callback to invoke on value change. |
| slideend |
event.originalEvent: Original event event.value: New value. |
Callback to invoke when slide ends. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-slider | Container element |
| p-slider-handle | Handle element. |
Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.
<span id="label_number">Number</span>
<Slider aria-labelledby="label_number" />
<Slider aria-label="Number" />
| Key | Function |
|---|---|
| tab | Moves focus to the slider. |
| left arrow up arrow | Decrements the value. |
| right arrow down arrow | Increments the value. |
| home | Set the minimum value. |
| end | Set the maximum value. |
| page up | Increments the value by 10 steps. |
| page down | Decrements the value by 10 steps. |
None.