Dear osoverflow,

There's no such possibility to customize the text inside that blue circle or hide it with the slider API.

But you can hide the blue circle with css code. Just add the below code to your styles.scss file:

.range-input {
    display: none !important;
}

If you want to customize the displayed text, you can listen for (rangeValueChange) event, and use the value from this event to display range value with your needed structure.

Here's the below code:

.html:

<mdb-range-input id="range" min="0" max="100" (rangeValueChange)="onRangeValueChange($event)"></mdb-range-input>
    <h1>Range value: {{rangeValue}}</h1>

.ts:

rangeValue = null;

  onRangeValueChange(event: any) {
    this.rangeValue = event.value;
  }

Best Regards,

Damian

Dear osoverflow,

Here's the documentation for the mdb-range-input component: https://mdbootstrap.com/docs/angular/forms/slider/

Could you please describe one more time, what do you want to achieve exactly? Do you want to modify the output? Which output? The value in this blue circle at the top of the slider, or something else?

Best Regards,

Damian