Dual Range Slider

Select a numeric span with two thumbs — for example 20–60 within 10–100. Hover (or focus) a thumb to see value tips. Works with Angular Forms via ngModel / formControlName.

freenew

20 – 80

Playground

color

disabled

showValue

showMinMax

showTip

HTML

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

Basic Dual Range

Bind an object { start, end }. Use color for the accent. Hover the track to see tips at each thumb.

Default (Primary)

Selected: 20 – 60

Success

Selected: 15 – 75

Danger

Selected: 30 – 70

HTML

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

TypeScript

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

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

@Component({
  selector: 'app-dual-range-slider-example',
  imports: [
    DualRangeSliderComponent
  ],
  template: `...`
})
export class DualRangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add dual-range-slider

Custom Min, Max, Step

Bound the track with min, max, and step. Example: price filter from $0 to $10,000.

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

Selected: $2000 – $7500

HTML

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

TypeScript

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

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

@Component({
  selector: 'app-dual-range-slider-example',
  imports: [
    DualRangeSliderComponent
  ],
  template: `...`
})
export class DualRangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add dual-range-slider

Labels & Tips

[showValue]="true" shows the span after the track. [showMinMax]="true" shows bounds. Tips are on by default; hide with [showTip]="false".

With value label

25 – 80

With min/max and value

100 25 – 80

HTML

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

TypeScript

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

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

@Component({
  selector: 'app-dual-range-slider-example',
  imports: [
    DualRangeSliderComponent
  ],
  template: `...`
})
export class DualRangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add dual-range-slider

Disabled State

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

HTML

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

TypeScript

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

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

@Component({
  selector: 'app-dual-range-slider-example',
  imports: [
    DualRangeSliderComponent
  ],
  template: `...`
})
export class DualRangeSliderExampleComponent {}

Install

bash

npx ply-ui-cli add dual-range-slider

Installation

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

bash

npx ply-ui-cli add dual-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 dual-range-slider
// Paths are relative to aliases.components (default: src/app/components)
import { DualRangeSliderComponent } from './dual-range-slider/dual-range-slider.component';

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

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

API reference for dual-range-slider
API	Member	Type	Default	Description
`ply-dual-range-slider`	`min`	`number`	`0`	Lower bound of the track.
`ply-dual-range-slider`	`max`	`number`	`100`	Upper bound of the track.
`ply-dual-range-slider`	`step`	`number`	`1`	Step increment between selectable values.
`ply-dual-range-slider`	`color`	`SliderColor`	`'primary'`	Accent color for the selected span and thumbs.
`ply-dual-range-slider`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).
`ply-dual-range-slider`	`showValue`	`boolean`	`false`	Always show the selected start–end label after the track.
`ply-dual-range-slider`	`showMinMax`	`boolean`	`false`	Show the track min/max labels beside the slider.
`ply-dual-range-slider`	`showTip`	`boolean`	`true`	When true (default), hover/focus shows value tips above each thumb.
`ply-dual-range-slider`	`ariaLabel`	`unknown`	`'Range'`	Accessible name for the control group.
`ply-dual-range-slider`	`class`	`string`	`''`	Extra host classes merged via `cn()`.

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