I have a project requirement where I am trying to design a slider with values (with ticks) like shown below.
slider which i have achieved
In this which 2.37 is fixed and won’t change but other values will change according to user input. Find the image below.
edit slider
In the slider Q1 Q2 Q3 Q4 are added in separate component like this

 <div class="key-metrics__slider-layout">
                    <span class="cdi-label-2 graphik-medium">Q1</span>
                    <span class="key-metrics_q1 cdi-label-2 graphik-medium">Q2</span>
                    <span class="key-metrics_q1 cdi-label-2 graphik-medium">Q3</span>
                    <span class="key-metrics_q1 cdi-label-2 graphik-medium">Q4</span>
                    <span class="cdi-label-2 graphik-medium percent-position4">%</span>
                  </div>

the issue is the 25% should come between Q1 and Q2. 50% between Q2 and Q3 and 75% between Q3 and Q4 but 2.37 is also passed as value to ngx slider because of which it is occupying a position and shifting 75% value to next index which shouldn’t happen.Value is 2.37
this is how am passing.2.37 should come between q3 and q4 and 75% should also come between q3 and q4. 25% should come between Q1 and Q2. 50% between Q2 and Q3 and 75% between Q3 and Q4 (this is always constant) 2.37 will change according to previous value if less than it wil have to align accordingly. how can i achieve it

css
--------
:host  ::ng-deep .ngx-slider .ngx-slider-ticks-values-under .ngx-slider-tick-value {
  top: -34px !important;
}

:host ::ng-deep .ngx-slider .ngx-slider-bubble {
  display: none;
}

:host ::ng-deep .ngx-slider-tick:first-child ngx-slider-tooltip-wrapper:nth-child(2){
  display: none;
}
// ::ng-deep .ngx-slider-inner-tooltip:first-child ngx-slider-tooltip-wrapper:nth-child(2){
//   display: none;
// }
:host ::ng-deep .ngx-slider {
  //width: 320px;
  z-index: 0;
  width: 90%;
  margin-left: 3%;
}
:host ::ng-deep .ngx-slider-inner-tooltip :first-of-type{
  display: none;
}
:host ::ng-deep .ngx-slider[disabled] .ngx-slider-pointer {
  display: none;
}

:host ::ng-deep .ngx-slider.animate .ngx-slider-tick {
  height: 21px;
  width: 1px;
  margin-left: -10px;
}
:host ::ng-deep .ngx-slider-tick:first-of-type {
  //  transform: translateX(318px) !important;
  background-color: white !important;
}

:host ::ng-deep .ngx-slider .ngx-slider-pointer {
  width: 16px;
  height: 16px;
  top: 0;
  margin-left: -8px;
}

:host ::ng-deep .ngx-slider .ngx-slider-pointer {
    opacity: 1;
    visibility: visible;
    width: 5px !important;
    transform: rotate(0deg) !important;
    border-radius: 0px !important;
    height: 20px !important;
    top: -3px !important;
    background-color: #0041F0 !important;
}

:host ::ng-deep .ngx-slider .ngx-slider-tick-value {
  margin-top: 15px;
}

:host ::ng-deep .ngx-slider .ngx-slider-tick-legend {
  font-family: Graphik;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  color: #877d8e;
//  color: white
}

// ::ng-deep .ngx-slider-inner-tooltip:last-of-type {
// margin-left: -25px !important;
// }

:host ::ng-deep .ngx-slider-inner-tooltip {
  font-family: graphik-medium !important;
}

:host ::ng-deep .ngx-slider .ngx-slider-bar {
  background: linear-gradient(270deg, rgba(0, 214, 171, 0.4) 11.87%, rgba(89, 131, 255, 0.4) 51.04%, rgba(255, 79, 163, 0.4) 86.59%) !important;
  height: 16px !important;
}

// ::ng-deep .ngx-slider .ngx-slider-pointer:after {
//   display: none;
// }
:host ::ng-deep .ngx-slider .ngx-slider-bubble {
  bottom: 14px;
  padding-left: 0px;
  margin-left: -4px;
}

// ::ng-deep .ngx-slider .ngx-slider-tick {
//   width: 1px;
//   height: 25px;
//   margin-left: 0px;
//   border-radius: 0;
//   background: #d5d3d6;
//   top: -5px;
// }
html
----
 <app-key-metrics-slider [stepArrayData]="kpiResponse?.quartileValues" 
                    [options]="keyMetricData?.sliderOptions"></app-key-metrics-slider>

html of slider
-----------------
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

ts of slider
-------------
@Input() stepArrayData;
 @Input() options;

 public value: number;
 
 ngOnInit(): void {
    this.value = this.stepArrayData[0]?.Value;
console.log('stepArray', this.options?.stepsArray);


  }

Please add Q1 Q2 Q3 Q4 by image because i can’t paste whole code