动态更改开始/结束属性时子元素的宽度为 0

Question

我有一个双范围滑块，类似于此处实现的滑块。与该教程不同的是，我使用的是 TailwindCSS 并正在编写 Elixir/Phoenix/LiveView 代码。

我能够将大部分内容翻译到我的代码库中，但我偶然发现了一个问题：

当我移动滑块时，“选定”范围也应该随着两个滑块而改变。 （教程中的深蓝色部分）。作者通过 javascript 更改了 CSS 样式中的

left

和

right

值。由于我没有，这是我的解决方案：

<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>

父级

div

是外部范围（教程中的浅蓝色），子级

span

是所选范围（教程中的深蓝色）。

start_end(@survey)

函数返回

"start-[40%] end-[70%]"

。拖动滑块时，数字会动态变化。

问题来了：

在初始页面加载时，所选范围显示得很好。但是当我开始拖动其中一个滑块时，它消失了，并且 Web 检查器显示该跨度的宽度为 0 像素，高度为 8 像素。

如果我将滑块拖回到初始位置

"start-[40%] end-[70%]"

，它会再次显示。拖走 - 它会隐藏，直到我恰好到达

"start-[25%] end-[70%]"

，然后它再次显示，然后再次隐藏，直到我到达

"start-[10%] end-[70%]"

或

"start-[0%] end-[70%]"

。 如果我更改初始

end

值，那么在拖动时，它将重新出现在其他

start

值（例如 30、15 等）上。

我尝试过使用

start + width

、

left + width

、

left + right

、

inset-x- + width

。行为保持不变。

请告诉我这里可能存在什么问题。

Answer 1

根据@Rico的评论，我将代码更改为以下内容：

<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>

其中

start_end

现在返回

"left:40%;right:30%;"

。