Is it possible to style the progress bar indicator using the data-value attribute?

[paulwongx]

In all examples I see, there's always a prop passed into the Progress Indicator to make it move via translateX. Is it possible to style it with the data-value attribute given? I'm not sure if my syntax is off or if I'm using this the wrong way.

What I see... (this works)

function ({value}:any) => {
  return (
    <ProgressPrimitive.Indicator
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }} // this works
    />
  )
}

What I'm looking to do...

function ({value}:any) => {
  return (
    <ProgressPrimitive.Indicator
      // style={{ transform: "translateX(-var(--data-value)%)" }} // doesn't work
      // style={{ transform: `translateX(calc( 100 - var(--data-value) * -1 )% )` }} // doesn't work
      // style={{ transform: `translateX(data-value)` }} // doesn't work
      // style={{ transform: `translateX([data-value])` }} // doesn't work
    />
  )
}

What's the correct syntax to get the value of data-value? Or am I using the attribute in a way that it was not meant for?

[joaom00]

To use data attributes on CSS you can use attr() function, but support for properties other than content is experimental.

What you can do is create a CSS variable on Root part and use it on Indicator part

https://codesandbox.io/p/sandbox/empty-voice-mct6bj?file=%2FApp.jsx

[paulwongx]

Wow thanks! That's awesome. Not as good in css so didn't know it works like that. Your solution inline is below.

To clarify though, if you define a css variable in a parent component, do all children have access to it? Is that how that works?

    <Progress.Root
      className="ProgressRoot"
      value={66}
      style={{
        ['--value']: `-${100 - progress}%`
      }}
    >
      <Progress.Indicator
        style={{
            backgroundColor: "white",
            width: "100%",
            height: "100%",
            transform: "translateX(var(--value))",
            transition: "transform 660ms cubic-bezier(0.65, 0, 0.35, 1)",
        }}
      />
    </Progress.Root>

Also, for learning purposes, if I still wanted to use the attr(--data-value) method, what would be the correct syntax? Not sure why when I try it doesn't work with the line below in the Indicator component...

transform: "translateX(-calc( 100 - attr(--data-value) ) %)",

[joaom00]

It should be attr(data-value) but as I say above, has only good support for content property.

You can inspect the element and you will see an Invalid property value warning

https://codesandbox.io/s/condescending-orla-5bvkcx

[paulwongx]

Understood. Also thanks for all your help!