Topic: Issue with slider input tooltip

Revature Pro priority asked 4 years ago

I'm using Pro version slider.
The percentage tooltip is getting updated only when releasing the mouse key press.
But the value inside the tooltip (ngModel value) is getting updated on mouse-move.
<input #percentInput name="range" type="range" min="0" max="100" (focus)="visibility = true;" [(ngModel)]="passPercent"

But I need the tooltip to be moved along with data.
Am I missing anything in the above mentioned code ?

mr.Jelle-Beat free commented 4 years ago

I had the same issue. We ended up scrapping this feature due to time limitations. Would love to see a solution!

Damian Gemza staff answered 4 years ago

Guys, It's super easy to achieve. You have to add (mousemove)="coverage()" event on slider's input element. And that's all! Please check my below code:
<form class="range-field mt-5">

<div class="track">

<div #rangeCloud class="range-cloud"title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}">

<span class="text-transform">{{range}}</span>



<input #inputname="range"type="range" (mousemove)="coverage()"min="0"max="100" (focus)="visibility = true" (blur)="visibility = false"

[(ngModel)]="range" (change)="coverage()">

Best Regards, Damian

mr.Jelle-Beat free commented 4 years ago

This worked, thanks a lot!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No