How to properly style jquery ui slider?

Question

css

Our esteemed designer has drawn this piece of art.


Everything would be fine, I already guessed how it can be more or less normal to make up, but still there is such an unpleasant bug


Well, that is, in order for this not to happen, you need to somehow set a limit on the value left. it’s clear that you can put a crutch on js that will set a limit with some kind of cunning cancer, but such a decision seems to me a little wrong.

Question: is there any non-spike method for styling the ui-slider?

Answer 1

Change to Ion.RangeSlider . It supports skins.

Answer 2

The non-crutch method implies that you yourself will not write nonsense and then cover it with crutches.
Cut out separately the background and the unfilled path with one picture.
Put the div inside, on which you hang the initialization, set a couple of margins on it and position it where necessary.
The handle itself will be attached to this div, just give it a size and a negative left margin to center it