In my current project, I am utilizing .NET Core 2.2 for the backend and Angular 8 for the frontend. The scenario involves having integer values on the backend within a specified range. For example:
[Required]
[Range(1073741824, 1099511627776)] // 1GB -> 1TB
public long DiskSize { get; set; }
When it comes to displaying these values, I have incorporated ng-slider5 into the setup. Here is how my TypeScript file is structured:
diskOptions: Options = {
floor: 1073741824,
ceil: 1099511627776
};
And this is what my HTML code looks like:
<div class="input-group mt-1">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-hdd text-primary"></i> Disk Size
</div>
</div>
<ng5-slider [(value)]="model.diskSize" name="diskSize" [(ngModel)]="model.diskSize"
[options]="diskOptions" class="form-control"></ng5-slider>
</div>
I am looking to enhance the slider functionality by not only displaying values but also incrementing them by 1gb steps until reaching 1tb, with the display format including 'GB' units and switching to 'TB' after 1024 GB.
Here is a visual representation of how the enhanced slider should look: https://i.sstatic.net/wEZCX.png