Topic: Issue with slider input tooltip

Revature Pro priority asked 4 years ago


Hi,
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"

(change)="changePercentage()">
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>

</div>

</div>

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

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

</form>
Best Regards, Damian

mr.Jelle-Beat free commented 4 years ago

This worked, thanks a lot!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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