Range Slider

The range slider allows users to select a numeric value within a defined range. It integrates natively with Angular Forms (ngModel and formControlName).

free

Basic Slider

Use color to change the accent color. Default range is 0–100.

With Min, Max, Step

Use min, max, and step to control the range.

Show Value and Range Labels

Use [showValue]="true" to display the current value and [showMinMax]="true" to show min/max labels.

Disabled State

Set [disabled]="true" to prevent interaction.

Installation

Run the following command to add this component to your project:

npx base-ui-cli add range-slider

npx -y base-ui-mcp

// Install: npx base-ui-cli add range-slider
// Paths are relative to aliases.components (default: src/app/components)
import { RangeSliderComponent } from './range-slider/range-slider.component';

@Component({
  selector: 'app-your-component',
  imports: [
    RangeSliderComponent
  ],
  template: `...`
})
export class YourComponent {}