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.

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.

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.