Slider inverted behaves the same way as dir='rtl'

[etx121]

Bug report

The slider inverted props inverts the filled Track and the scale. I am using the shadcnui wrapper

Current Behavior

When I use this code:

<Slider.Root
          className="relative flex items-center select-none touch-none w-[200px] h-5"
          defaultValue={[5]}
          min={1}
          max={30}
          step={1}
          inverted={true}
          onValueChange={(e) => {
            setSliderValue(e[0]);
          }}
        >
          <Slider.Track className="bg-blackA7 relative grow rounded-full h-[3px]">
            <Slider.Range className="absolute bg-white rounded-full h-full" />
          </Slider.Track>
          <Slider.Thumb
            className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA4 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA5"
            aria-label="Volume"
          />
        </Slider.Root>

I expect to have the filled track inverting only. However, the values are also reverting. inverting behaves the same way as the dir='rtl'

Expected behavior

When I use this code with inverted={true} :

<Slider.Root
          className="relative flex items-center select-none touch-none w-[200px] h-5"
          defaultValue={[5]}
          min={1}
          max={30}
          step={1}
          inverted={true}
          onValueChange={(e) => {
            setSliderValue(e[0]);
          }}
        >
          <Slider.Track className="bg-blackA7 relative grow rounded-full h-[3px]">
            <Slider.Range className="absolute bg-white rounded-full h-full" />
          </Slider.Track>
          <Slider.Thumb
            className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA4 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA5"
            aria-label="Volume"
          />
        </Slider.Root>

I just want to invert the filled track in this way:

Reproducible example

CodeSandbox Template

"use client";

import * as React from "react";
import * as Slider from "@radix-ui/react-slider";

// If you aren't working in TypeScript, feel free to rename
// this file to `App.js` and reproduce your issue without
// types.

export function App() {
  const [sliderValue, setSliderValue] = React.useState(1);
  return (
    <div className="App">
      <h1>Radix Primitives Template</h1>
      <div style={{ margin: "1rem 0" }}>
        <Slider.Root
          className="relative flex items-center select-none touch-none w-[200px] h-5"
          defaultValue={[5]}
          min={1}
          max={30}
          step={1}
          inverted={true}
          onValueChange={(e) => {
            setSliderValue(e[0]);
          }}
        >
          <Slider.Track className="bg-blackA7 relative grow rounded-full h-[3px]">
            <Slider.Range className="absolute bg-white rounded-full h-full" />
          </Slider.Track>
          <Slider.Thumb
            className="block w-5 h-5 bg-white shadow-[0_2px_10px] shadow-blackA4 rounded-[10px] hover:bg-violet3 focus:outline-none focus:shadow-[0_0_0_5px] focus:shadow-blackA5"
            aria-label="Volume"
          />
        </Slider.Root>
      </div>
    </div>
  );
}

Suggested solution

Add a way to invert the filled track without inverting the scale.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-slider	1.2.0
React	n/a	18
Browser	Google Chrome	126.0.6478.62
Assistive tech
Node	n/a	20
npm/yarn
Operating System	MacOS	14.5

[vladmoroz]

This is by design, inverted inverts the direction of the entire slider. Sounds like you just want to switch up the styling of the track and range, without changing how the Slider actually works.