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%;"
.