Free
Pro

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

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

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

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

0
100 25 – 80

HTML

Disabled State

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


HTML

Installation

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

bash

npx base-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 Base UI MCP server.

bash

npx -y base-ui-mcp

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

typescript (Example)

// Install: npx base-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
APIMemberTypeDefaultDescription
base-dual-range-sliderminnumber0Lower bound of the track.
base-dual-range-slidermaxnumber100Upper bound of the track.
base-dual-range-sliderstepnumber1Step increment between selectable values.
base-dual-range-slidercolorSliderColor'primary'Accent color for the selected span and thumbs.
base-dual-range-sliderdisabledbooleanfalseWhether the control is disabled (consumer-facing input).
base-dual-range-slidershowValuebooleanfalseAlways show the selected start–end label after the track.
base-dual-range-slidershowMinMaxbooleanfalseShow the track min/max labels beside the slider.
base-dual-range-slidershowTipbooleantrueWhen true (default), hover/focus shows value tips above each thumb.
base-dual-range-sliderariaLabelunknown'Range'Accessible name for the control group.
base-dual-range-sliderclassstring''Extra host classes merged via `cn()`.