Weiser pro asked 4 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

Weiser pro commented 4 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 4 years ago

Hello, could you share me some screenshots of described situation? Best Regards, Damian

Weiser pro commented 4 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 anymore

Damian Gemza staff commented 4 years ago

But could you explain me, in which situation someone would use range > than 100?

Weiser pro commented 4 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 > 100

Damian Gemza staff commented 4 years ago

Weiser, i'm actually working on solving this issue. I'll let you know, when works will be finished. Regards, Damian

Damian Gemza staff commented 4 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

Damian Gemza staff answered 4 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,


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes