bs-range is a slider input bound through [(ngModel)] (or any reactive-forms control). Use [min], [max], and [step] to constrain the value, and [disabled] to lock the control.
<bs-range [min]="0" [max]="100" [(ngModel)]="value"></bs-range>
import { Component, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsRangeComponent } from '@mintplayer/ng-bootstrap/range';
@Component({
selector: 'my-range-demo',
templateUrl: './my-range-demo.component.html',
imports: [FormsModule, BsRangeComponent],
})
export class MyRangeDemoComponent {
readonly value = model(50);
}
Template-driven [(ngModel)] and reactive [formControl] both bind through the component's ControlValueAccessor: the value, the disabled state, and touched when focus leaves.
44
<!-- template-driven (FormsModule) -->
<bs-range [min]="0" [max]="10" [(ngModel)]="value"></bs-range>
<!-- reactive (ReactiveFormsModule): control = new FormControl(...) -->
<bs-range [min]="0" [max]="10" [formControl]="control"></bs-range>