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

Playground

color

disabled

showValue

showMinMax

HTML

<ply-range-slider color="primary" [showValue]="true">Range Slider</ply-range-slider>

Basic Slider

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

Default (Primary)

Value: 50

Success

Value: 75

Danger

Value: 30

HTML

<ply-range-slider [(ngModel)]="myValue" color="success"></ply-range-slider>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-range-slider-example',
  imports: [
    RangeSliderComponent
  ],
  template: `...`
})
export class RangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add range-slider

With Min, Max, Step

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

Price range: $0 – $10,000 (step 100)

Value: $5000

HTML

<ply-range-slider [min]="0" [max]="10000" [step]="100"
  [(ngModel)]="price"></ply-range-slider>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-range-slider-example',
  imports: [
    RangeSliderComponent
  ],
  template: `...`
})
export class RangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add range-slider

Show Value and Range Labels

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

With value display

With min/max and value

10075

HTML

<ply-range-slider color="accent" [showValue]="true"
  [(ngModel)]="myValue"></ply-range-slider>
<ply-range-slider [showMinMax]="true" [showValue]="true"
  [(ngModel)]="myValue"></ply-range-slider>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-range-slider-example',
  imports: [
    RangeSliderComponent
  ],
  template: `...`
})
export class RangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add range-slider

Disabled State

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

HTML

<ply-range-slider [disabled]="true" [(ngModel)]="value"></ply-range-slider>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-range-slider-example',
  imports: [
    RangeSliderComponent
  ],
  template: `...`
})
export class RangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add range-slider

Installation

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

bash

npx ply-ui-cli add range-slider

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-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 {}

API for range-slider — generated from JSDoc in the library source.

API reference for range-slider
API	Member	Type	Default	Description
`ply-range-slider`	`min`	`number`	`0`	—
`ply-range-slider`	`max`	`number`	`100`	—
`ply-range-slider`	`step`	`number`	`1`	—
`ply-range-slider`	`color`	`SliderColor`	`'primary'`	—
`ply-range-slider`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).
`ply-range-slider`	`showValue`	`boolean`	`false`	—
`ply-range-slider`	`showMinMax`	`boolean`	`false`	—
`ply-range-slider`	`ariaLabel`	`unknown`	`'Slider'`	—

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).