Code which used Ion Range

gistfile1.txt

<ion-content no-padding>

  <div id="color-display-container" [ngStyle]="{'background-color': colorCode}"></div>

  <ion-item>
    <ion-input [(ngModel)]="rgbtxt" placeholder="Enter RGB color(e.g. 25;50;75)"></ion-input>
    <ion-button clear item-right (click)="getRGB()">Apply RGB</ion-button>
  </ion-item>
  <ion-item style="margin-bottom: 5vh;">
    <ion-range (ngModelChange)="rChange($event)" [(ngModel)]="R" class="range" 
      pin="true" min="0" max="255" step="1">
    </ion-range>
    <ion-range (ngModelChange)="gChange($event)" [(ngModel)]="G" class="range" 
      pin="true" min="0" max="255" step="1">
    </ion-range>
    <ion-range (ngModelChange)="bChange($event)" [(ngModel)]="B" class="range" 
      pin="true" min="0" max="255" step="1">
    </ion-range>
  </ion-item>

  <ion-item>
    <ion-input [(ngModel)]="xyztxt" placeholder="Enter XYZ color(e.g. 0.2;0.4;0.6)"></ion-input>
    <ion-button clear item-right (click)="getXYZ()">Apply XYZ</ion-button>
  </ion-item>
  <ion-item style="margin-bottom: 5vh;">
    <ion-range (ngModelChange)="xChange($event)" [(ngModel)]="X" class="range" 
      pin="true" min="0" max="0.95" step="0.01">
    </ion-range>
    <ion-range (ngModelChange)="yChange($event)" [(ngModel)]="Y" class="range" 
      pin="true" min="0" max="1" step="0.01">
    </ion-range>
    <ion-range (ngModelChange)="zChange($event)" [(ngModel)]="Z" class="range" 
      pin="true" min="0" max="1.08" step="0.01">
    </ion-range>
  </ion-item>

  <ion-item>
    <ion-input [(ngModel)]="hlstxt" placeholder="Enter HLS color(e.g. 333;50;50)"></ion-input>
    <ion-button clear item-right (click)="getHLS()">Apply HLS</ion-button>
  </ion-item>
  <ion-item style="margin-bottom: 5vh;">
    <ion-range (ngModelChange)="hChange($event)" [(ngModel)]="H" class="range" 
      pin="true" min="0" max="360" step="1">
    </ion-range>
    <ion-range (ngModelChange)="lChange($event)" [(ngModel)]="L" class="range" 
      pin="true" min="0" max="100" step="1">
    </ion-range>
    <ion-range (ngModelChange)="sChange($event)" [(ngModel)]="S" class="range" 
      pin="true" min="0" max="100" step="1">
    </ion-range>
  </ion-item>

  <div style="height: 8vh;">
    <div class="palette-block" style="background-color: rgb(22, 22, 22)" (click)="setColorRGB('rgb(22, 22, 22)', 22, 22, 22)"></div>
    <div class="palette-block" style="background-color: rgb(230, 226, 9)" (click)="setColorRGB('rgb(230, 226, 9)', 230, 226, 9)"></div>
    <div class="palette-block" style="background-color: rgb(29, 233, 121)" (click)="setColorRGB('rgb(29, 233, 121)', 29, 233, 121)"></div>
    <div class="palette-block" style="background-color: rgb(133, 133, 133)" (click)="setColorRGB('rgb(133, 133, 133)', 133, 133, 133)"></div>
    <div class="palette-block" style="background-color: rgb(155, 22, 22)" (click)="setColorRGB('rgb(155, 22, 22)', 155, 22, 22)"></div>

    <div class="palette-block" style="background-color: hsl(278, 100%, 50%)" (click)="setColorHSL('hsl(278, 100, 50)', 278, 100, 50)"></div>
    <div class="palette-block" style="background-color: hsl(222, 99%, 99%)" (click)="setColorHSL('hsl(222, 99, 99)', 222, 99, 99)"></div>
    <div class="palette-block" style="background-color: hsl(255, 2%, 2%)" (click)="setColorHSL('hsl(255, 2, 2)', 255, 2, 2)"></div>
    <div class="palette-block" style="background-color: hsl(25, 22%, 22%)" (click)="setColorHSL('hsl(25, 22, 22)', 25, 22, 22)"></div>
    <div class="palette-block" style="background-color: hsl(105, 55%, 55%)" (click)="setColorHSL('hsl(105, 55, 55)', 105, 55, 55)"></div>
  </div>

</ion-content>