How to make custom triangle slider fill in tailwind

Question

I'm trying to make a custom triangle slider.

This is what I'm trying to achieve:

So far, I'm able to make this shape, but as I slide it, the blue fill covers the shape:

        {/* track */}
        <div className={"absolute h-48 top-[80%] translate-y-[-50%] w-full bg-background-white [clip-path:polygon(100%_0%,100%_100%,0_100%,_0%_50%)]"} />
        {/* fill */}
        <div
          className={"absolute h-48 top-[80%] translate-y-[-50%]  bg-toast-icon-tag-active"}
          style={{ width: state.getThumbPercent(0) * 100 + "%" }}
        />

Answer 1

<div className="relative">
  {/* track */}
  <div className="absolute h-48 top-[80%] transform -translate-y-1/2 w-full bg-background-white" style={{ clipPath: "polygon(100% 0%, 100% 100%, 0 100%, " + state.getThumbPercent(0) * 100 + "% 50%)" }}></div>
  {/* fill */}
  <div className="absolute h-48 top-[80%] transform -translate-y-1/2 bg-toast-icon-tag-active" style={{ width: state.getThumbPercent(0) * 100 + "%", clipPath: "polygon(100% 0%, 100% 100%, 0 100%, " + state.getThumbPercent(0) * 100 + "% 50%)" }}></div>
</div>

Might be something like this ?