Slider

UiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!

<nouislider [min]="someMin" [max]="someMax" [step]="0.05" [(ngModel)]="someValue" (ngModelChange)="onChange($event)" [disabled]="disabled"></nouislider>
<div class="btn-group mb-1 mr-1">
    <button type="button" class="btn btn-primary" [disabled]="disabled" (click)="changeSomeValue(-1)">-1</button>
    <button type="button" class="btn btn-primary" [disabled]="disabled" (click)="changeSomeValue(1)">+1</button>
</div>
<div class="btn-group mb-1 mr-1">
    <button type="button" class="btn btn-primary" [disabled]="disabled" (click)="changeSomeMin(-1)">-1</button>
    <button type="button" class="btn btn-primary" [disabled]="disabled" (click)="changeSomeMin(1)">+1</button>
</div>
<div class="btn-group mb-1 mr-1">
    <button type="button" class="btn btn-primary" [disabled]="disabled" (click)="changeSomeMax(-1)">-1</button>
    <button type="button" class="btn btn-primary" [disabled]="disabled" (click)="changeSomeMax(1)">+1</button>
</div>
<div class="btn-group mb-1 mr-1">
    <button type="button" class="btn btn-primary" [class.active]="disabled" (click)="disabled=!disabled">Disable</button>
</div>