Two thumbs over [0, 100]. Block-crossing — value[0] is always lowest.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-basic-multi-range',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './basic-multi-range.component.html',
})
export class BasicMultiRangeComponent {
readonly value = signal<number[]>([20, 80]);
readonly disabled = signal(false);
}
<bs-multi-range
[min]="0"
[max]="100"
[(ngModel)]="value"
[disabled]="disabled()">
</bs-multi-range>
Initial value [2, 5, 8] on [0, 10].
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-three-thumb',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './three-thumb.component.html',
})
export class ThreeThumbComponent {
readonly value = signal<number[]>([2, 5, 8]);
}
<bs-multi-range
[min]="0"
[max]="10"
[step]="0.5"
[(ngModel)]="value">
</bs-multi-range>
Thumbs cannot get closer than 20 units.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-min-distance',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './min-distance.component.html',
})
export class MinDistanceComponent {
readonly value = signal<number[]>([20, 60]);
}
<bs-multi-range
[min]="0"
[max]="100"
[minDistance]="20"
[(ngModel)]="value">
</bs-multi-range>
Tooltip + aria-valuetext formatted via (v) => '$' + v.toFixed(2).
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-currency-range',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './currency-range.component.html',
})
export class CurrencyRangeComponent {
readonly value = signal<number[]>([25, 75]);
readonly format = (v: number) => '$' + v.toFixed(2);
}
<bs-multi-range
[min]="0"
[max]="100"
[(ngModel)]="value"
[formatValue]="format">
</bs-multi-range>
Min at the bottom (thermometer convention). Tooltip appears to the right.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-vertical-range',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './vertical-range.component.html',
styles: [':host .vertical-host { display: block; height: 12rem; }'],
})
export class VerticalRangeComponent {
readonly value = signal<number[]>([30, 70]);
}
<div class="vertical-host">
<bs-multi-range
[min]="0"
[max]="100"
[(ngModel)]="value"
[orientation]="'vertical'">
</bs-multi-range>
</div>
Wrapper has dir="rtl"; pointer + ←/→ keyboard math invert. Vertical mode unaffected by direction.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-rtl-range',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './rtl-range.component.html',
})
export class RtlRangeComponent {
readonly value = signal<number[]>([15, 85]);
}
<div dir="rtl">
<bs-multi-range
[min]="0"
[max]="100"
[(ngModel)]="value">
</bs-multi-range>
</div>
Static state — cannot be focused or dragged.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-disabled-range',
imports: [FormsModule, BsMultiRangeComponent],
templateUrl: './disabled-range.component.html',
})
export class DisabledRangeComponent {
readonly value = signal<number[]>([25, 75]);
}
<bs-multi-range
[min]="0"
[max]="100"
[(ngModel)]="value"
[disabled]="true">
</bs-multi-range>
Bound via [formControl]. The JSON below reflects the live formControl.value.
[10,40,70]
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { BsMultiRangeComponent } from '@mintplayer/ng-bootstrap/multi-range';
@Component({
selector: 'app-reactive-range',
imports: [ReactiveFormsModule, BsMultiRangeComponent],
templateUrl: './reactive-range.component.html',
})
export class ReactiveRangeComponent {
readonly control = new FormControl<number[]>([10, 40, 70], { nonNullable: true });
}
<bs-multi-range
[min]="0"
[max]="100"
[formControl]="control">
</bs-multi-range>
<pre>{{ control.value | json }}</pre>