Topic: Range Slider to work like jQuery UI Range Slider

Mark Boyce free asked 3 years ago


Is it possible to get 2 handles like the one available in jQuery UI Range Slider? When mdb's slider says range slider, it is a single handle with min/max limits. What I'm looking for is something like this.

https://jqueryui.com/slider/#range

Please advise if this is possible to achieve.


Grzegorz Bujański staff answered 3 years ago


Mark Boyce free answered 3 years ago


If I can't limit the range sliders from intersecting with one another, then the Sliders are useless. Users may slide further and won't know where it stops and where it starts.


Grzegorz Bujański staff answered 3 years ago


Unfortunately, adding such styling will be impossible. When you inspect the Slider from Jquery UI you notice that this component consists of a div that has 2 spans inside and another div. This gives you more styling options. We would have to rewrite the entire component from scratch to make it possible.

We also do not have a built-in option that will allow you to block sliders so that they do not intersect each other.


Mark Boyce free answered 3 years ago


Thanks. Funny how I missed that one in my search. Not sure how.

When I was testing, I see that the min slider seems to go beyond the max slider and vise versa. It doesn't get blocked by one another. Is there anyway to prevent it from going beyond the limit and also not overlap one another?

Also, would you be able to help me style your slider to look like the one from jQuery UI? Reason being, jQuery UI slider indicates the gap between both handles in a shaded look which makes it obvious to the user.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 11.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes