Topic: Issue with slider input tooltip
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 ?
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:
Best Regards,
Damian
<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>
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: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 6.2.2
- Device: Desktop
- Browser: All
- OS: Windows
- Provided sample code: No
- Provided link: No
Tags
Related topics
mr.Jelle-Beat commented 6 years ago
I had the same issue. We ended up scrapping this feature due to time limitations. Would love to see a solution!