💄 use Bootstrap's range style

src/adjuster/adjuster-advanced-panel.component.html

@@ -31,7 +31,7 @@
     </div>
     <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
       <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
-      <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
+      <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div class="p-2 center-block">
       {{'ADJUSTER.myRoleIs' | translate}}:&emsp;

src/adjuster/adjuster-simple-panel.component.html

@@ -31,7 +31,7 @@
     </div>
     <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
       <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
-      <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
+      <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div class="p-2 center-block">
       {{'ADJUSTER.myRoleIs' | translate}}:&emsp;