I have a double range slider, similar to the one implemented here. Unlike that tutorial, I am using TailwindCSS and am writing the Elixir/Phoenix/LiveView code.
I was able to translate most of the things into my codebase, but I stumbled upon one problem:
When I move sliders, the "selected" range should also change following both sliders. (the dark blue part in the tutorial). The author changes the left and right values in CSS styles via javascript. Since I don't have that, here's my solution:
<div class="relative h-2 rounded-full bg-zinc-400">
<span class={"absolute h-full #{start_end(@survey)} rounded-full bg-zinc-600"}></span>
</div>
The parent div is the outer range (the light blue in the tutorial), the child span is the selected range (the dark blue in the tutorial).
The start_end(@survey) function returns "start-[40%] end-[70%]". The numbers change dynamically while the sliders are being dragged.
Here's the problem:
on initial page loading the selected range displays perfectly fine. But when I start dragging one of the sliders, it disappears and web inspector shows that the span has 0px width and 8px height.
If I drag the sliders back to initial position "start-[40%] end-[70%]", it displays again. Drag away - it hides, until I reach exactly "start-[25%] end-[70%]", then it displays again, then hides again until I reach "start-[10%] end-[70%]" or "start-[0%] end-[70%]".
If I change the initial end value, then, while dragging, it will reappear on other start values (e.g. 30, 15, etc).
I have tried to use start + width, left + width, left + right, inset-x- + width. The behaviour remains the same.
Please advise me on what can be the problem here.
Following comment by @Rico, I changed the code to the following:
<div class="relative h-2 rounded-full bg-zinc-400">
<span
class="rounded-full bg-zinc-600"
style={"position:absolute; height:100%; #{start_end(@survey)}"}
>
</span>
</div>
Where start_end now returns "left:40%;right:30%;".