📄 primeng/slider

File: slider.md | Updated: 11/15/2025

Source: https://primeng.org/slider

PassThrough Attributes just landed ✅Learn More

  • SearchK

  • Primary

    Surface

    PresetsAuraMaterialLaraNora

    Ripple

    RTL

  • v20

  • FEATURES

  • API

  • THEMING

  • PASSTHROUGH

Slider

Slider is a component to provide input with a drag handle.

Import #

import { SliderModule } from 'primeng/slider';

Basic #

Two-way binding is defined using the standard ngModel directive.

<p-slider [(ngModel)]="value" class="w-56" />

Input #

Slider is connected to an input field using two-way binding.

<input type="text" pInputText [(ngModel)]="value" class="w-full mb-4"/> <p-slider [(ngModel)]="value" class="w-full" />

Step #

Size of each movement is defined with the step property.

<p-slider [(ngModel)]="value" [step]="20" class="w-56" />

Range #

When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.

<p-slider [(ngModel)]="rangeValues" [range]="true" class="w-56" />

Filter #

Image filter implementation using multiple sliders.

user headerContrastBrightnessSepia

<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" /> <p-selectbutton [(ngModel)]="filter" [options]="filterOptions" optionLabel="label" optionValue="value" class="mb-4" /> <p-slider [(ngModel)]="filterValues[filter]" class="w-56" [min]="0" [max]="200" />

Vertical #

Default layout of slider is horizontal, use orientation property for the alternative vertical mode.

<p-slider [(ngModel)]="value" orientation="vertical" class="h-56" />

Forms #

Template Driven

Submit

<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex justify-center flex-col gap-4"> <div class="flex flex-col gap-4"> <p-slider #model="ngModel" [(ngModel)]="value" class="w-56" required [invalid]="model.invalid && (model.touched || exampleForm.submitted)" name="slider" /> @if (model.invalid && (model.touched || exampleForm.submitted)) { <p-message severity="error" size="small" variant="simple">Must be greater than 25.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Reactive Forms

Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

Submit

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4"> <div class="flex flex-col gap-4"> <p-slider formControlName="value" class="w-56" /> @if (isInvalid('value')) { <p-message severity="error" size="small" variant="simple">Must be greater than 25.</p-message> } </div> <button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button> </form>

Accessibility #

Screen Reader

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 ariaLabelledBy and ariaLabel props.

<span id="label_number">Number</span> <p-slider ariaLabelledBy="label_number" />

<p-slider ariaLabel="Number" />

Keyboard Support

| 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. |

  • Import

  • Basic

  • Input

  • Step

  • Range

  • Filter

  • Vertical

  • Forms

    • Template Driven

    • Reactive Forms

  • Accessibility

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.

Learn More

PrimeNG 20.3.0 by PrimeTek