form

Slider

An input where the user selects a value from within a given range.

Preview

A preview of the Slider component with interactive controls.

Preview Code
Volume
Interactive

Installation

Add the Slider component to your project.

Bash
ng g @ng-cn/core:c slider

Usage

Import and use the Slider component in your Angular application.

Template TypeScript
template.html
<div class="w-full max-w-md space-y-4">
  <Slider [(value)]="value" [max]="100" [step]="1" class="w-full" />
  <p class="text-sm text-muted-foreground text-center">Value: {{ value }}</p>
</div>

Examples

Explore different variations and use cases for the Slider component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
value number | number[] — The value of the slider.
max number 100 The maximum value.
min number 0 The minimum value.
step number 1 The step increment.
class string — Additional CSS classes to apply.