Topic: [BUG REPORT]
Weiser pro asked 6 years ago
hi,
found a bug on range-component:
<formclass="range-field w-100">
<divclass="track">
<divclass="range-cloud"title="range" [ngClass]="{'visible': this.visibility, 'hidden': !this.visibility}" [ngStyle]="{'left': range + '%'}">
<spanclass="text-transform">{{range}}</span>
</div>
</div>
<inputname="range"type="range"min="0"max="120" (focus)="visibility = true" (blur)="visibility = false" [(ngModel)]="range"
(click)="coverage()">
</form>
the greater you set max value the greater is the distance between the slider and number bubble on top.
also slider seems to become laggy if you vary the min and max values (sometimes slider dot stay in center and is not moveable)
component also throws error:
https://imgur.com/jKjKQBC
Damian Gemza staff answered 6 years ago
Hello again, Weiser,
Today we will put an 5.1.2 update that includes fix for your's problem.
Please, use our documentation one more time. There's implemented a solution for input range.
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Tags
Weiser pro commented 6 years ago
the range variable and method wasn't declared by my side. now it's working. Distance between dot and tracker is still there.Damian Gemza staff commented 6 years ago
Hello, could you share me some screenshots of described situation? Best Regards, DamianWeiser pro commented 6 years ago
by increasing the max value the distance between dot and bubble become bigger. max="130" https://imgur.com/YlNTUt3 max="160" https://imgur.com/ajGOGc4 if you set max to high value like 1000 you wont see the bubble anymoreDamian Gemza staff commented 6 years ago
But could you explain me, in which situation someone would use range > than 100?Weiser pro commented 6 years ago
sure: -setting min - max price filter. -setting geofence radius for maps -setting max distance of km ..... there are many use cases using value > 100Damian Gemza staff commented 6 years ago
Weiser, i'm actually working on solving this issue. I'll let you know, when works will be finished. Regards, DamianDamian Gemza staff commented 6 years ago
For a quick workaround you can use something like this: For example if you have max="300", in line [ngStyle]="{'left': range + '%'} please change to: [ngStyle]="{'left': *range/300) * 100 + '%'} I'm working on fixing this in right way. Best Regards, Damian