Change isRtl prop

docs/data/base/components/slider/RtlSlider.js

@@ -8,7 +8,7 @@ export default function RtlSlider() {
   const isDarkMode = useIsDarkMode();
   return (
     <Box className={isDarkMode ? 'dark' : ''} sx={{ width: 320, margin: '32px' }}>
-      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" isRtl>
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" direction="rtl">
         <Label id="VolumeSliderLabel">Volume (RTL)</Label>
         <SliderOutput />
         <SliderTrack>

docs/data/base/components/slider/RtlSlider.tsx

@@ -7,7 +7,7 @@ export default function RtlSlider() {
   const isDarkMode = useIsDarkMode();
   return (
     <Box className={isDarkMode ? 'dark' : ''} sx={{ width: 320, margin: '32px' }}>
-      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" isRtl>
+      <Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" direction="rtl">
         <Label id="VolumeSliderLabel">Volume (RTL)</Label>
         <SliderOutput />
         <SliderTrack>

docs/data/base/components/slider/RtlSlider.tsx.preview

@@ -1,4 +1,4 @@
-<Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" isRtl>
+<Slider defaultValue={50} aria-labelledby="VolumeSliderLabel" direction="rtl">
   <Label id="VolumeSliderLabel">Volume (RTL)</Label>
   <SliderOutput />
   <SliderTrack>

docs/data/base/components/slider/slider.md

@@ -174,10 +174,10 @@ To create vertical sliders, set the `orientation` prop to `"vertical"`. This wil
 
 ## RTL
 
-Use the `isRtl` prop to set the slider's direction to RTL:
+Use the `direction` prop to set the slider's direction to `'rtl'` for right-to-left languages:
 
 ```jsx
-<Slider.Root isRtl>{/* Subcomponents */}</Slider.Root>
+<Slider.Root direction="rtl">{/* Subcomponents */}</Slider.Root>
 ```
 
 In a RTL Slider, <kbd class="key">Left Arrow</kbd> increases the value while <kbd class="key">Right Arrow</kbd> decreases the value.

docs/pages/base-ui/api/slider-root.json

@@ -5,8 +5,11 @@
     "defaultValue": {
       "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
     },
+    "direction": {
+      "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
+      "default": "'ltr'"
+    },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
-    "isRtl": { "type": { "name": "bool" }, "default": "false" },
     "largeStep": { "type": { "name": "number" }, "default": "10" },
     "marks": {
       "type": {

docs/pages/base-ui/api/use-slider-thumb.json

@@ -9,7 +9,10 @@
       },
       "required": true
     },
-    "isRtl": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
+    "direction": {
+      "type": { "name": "SliderDirection", "description": "SliderDirection" },
+      "required": true
+    },
     "largeStep": {
       "type": { "name": "number", "description": "number" },
       "default": "10",

docs/pages/base-ui/api/use-slider.json

@@ -7,8 +7,11 @@
         "description": "number | ReadonlyArray<number>"
       }
     },
+    "direction": {
+      "type": { "name": "SliderDirection", "description": "SliderDirection" },
+      "default": "'ltr'"
+    },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
-    "isRtl": { "type": { "name": "boolean", "description": "boolean" }, "default": "false" },
     "largeStep": { "type": { "name": "number", "description": "number" }, "default": "10" },
     "marks": {
       "type": {
@@ -86,6 +89,10 @@
       },
       "required": true
     },
+    "direction": {
+      "type": { "name": "SliderDirection", "description": "SliderDirection" },
+      "required": true
+    },
     "disabled": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "dragging": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "getFingerNewValue": {
@@ -109,7 +116,6 @@
       },
       "required": true
     },
-    "isRtl": { "type": { "name": "boolean", "description": "boolean" }, "required": true },
     "largeStep": {
       "type": { "name": "number", "description": "number" },
       "default": "10",

docs/pages/experiments/slider-joy.tsx

@@ -92,7 +92,9 @@ const SliderTrackFill = React.forwardRef(function SliderTrackFill(
 ) {
   const { style, ...otherProps } = props;
 
-  const { axis, disabled, isRtl, orientation, percentageValues } = Slider.useSliderContext();
+  const { axis, direction, disabled, orientation, percentageValues } = Slider.useSliderContext();
+
+  const isRtl = direction === 'rtl';
 
   const isRange = percentageValues.length > 1;
 

docs/pages/experiments/slider-marks.tsx

@@ -32,7 +32,8 @@ function getSliderThumbAriaValueText(value: number) {
 
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { isRtl, values } = useSliderContext();
+  const { direction, values } = useSliderContext();
+  const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (
     <React.Fragment>
@@ -90,7 +91,7 @@ export default function App() {
         </Slider.Track>
       </Slider.Root>
 
-      <Slider.Root className="TempSlider" defaultValue={40} isRtl>
+      <Slider.Root className="TempSlider" defaultValue={40} direction="rtl">
         <pre>RTL</pre>
         <Slider.Output className="TempSlider-output" />
         <Slider.Track className="TempSlider-track">
@@ -131,7 +132,7 @@ export default function App() {
         </Slider.Track>
       </Slider.Root>
 
-      <Slider.Root className="TempSlider" defaultValue={40} isRtl>
+      <Slider.Root className="TempSlider" defaultValue={40} direction="rtl">
         <pre>RTL inverted fill</pre>
         <Slider.Output className="TempSlider-output" />
         <Slider.Track className="TempSlider-track">

docs/pages/experiments/slider-rtl.tsx

@@ -5,23 +5,28 @@ import { Styles, TrackFill } from './slider';
 export default function App() {
   return (
     <div className="App">
-      <Slider.Root className="MySlider" defaultValue={50} isRtl>
+      <Slider.Root className="MySlider" defaultValue={50} direction="rtl">
         <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track">
           <TrackFill className="MySlider-track-fill" />
           <Slider.Thumb className="MySlider-thumb one" />
         </Slider.Track>
       </Slider.Root>
 
-      <Slider.Root className="VerticalSlider" defaultValue={50} isRtl orientation="vertical">
+      <Slider.Root
+        className="VerticalSlider"
+        defaultValue={50}
+        direction="rtl"
+        orientation="vertical"
+      >
         <Slider.Output className="VerticalSlider-output" />
         <Slider.Track className="VerticalSlider-track">
           <TrackFill className="VerticalSlider-track-fill" />
           <Slider.Thumb className="VerticalSlider-thumb one" />
         </Slider.Track>
       </Slider.Root>
 
-      <Slider.Root className="MySlider" defaultValue={[50, 70]} isRtl>
+      <Slider.Root className="MySlider" defaultValue={[50, 70]} direction="rtl">
         <Slider.Output className="MySlider-output" />
         <Slider.Track className="MySlider-track">
           <TrackFill className="MySlider-track-fill" />
@@ -30,7 +35,12 @@ export default function App() {
         </Slider.Track>
       </Slider.Root>
 
-      <Slider.Root className="VerticalSlider" defaultValue={[50, 70]} isRtl orientation="vertical">
+      <Slider.Root
+        className="VerticalSlider"
+        defaultValue={[50, 70]}
+        direction="rtl"
+        orientation="vertical"
+      >
         <Slider.Output className="VerticalSlider-output" />
         <Slider.Track className="VerticalSlider-track">
           <TrackFill className="VerticalSlider-track-fill" />

docs/pages/experiments/slider.tsx

@@ -25,10 +25,12 @@ export const TrackFill = React.forwardRef(function TrackFill(
   // does not support inverted range fill! (yet)
   const { inverted = false, style, ...otherProps } = props;
 
-  const { axis, disabled, isRtl, orientation, percentageValues } = useSliderContext();
+  const { axis, direction, disabled, orientation, percentageValues } = useSliderContext();
 
   const isRange = percentageValues.length > 1;
 
+  const isRtl = direction === 'rtl';
+
   let internalStyles;
 
   if (isRange) {

docs/translations/api-docs/slider-root/slider-root.json

@@ -10,10 +10,10 @@
     "defaultValue": {
       "description": "The default value of the slider. Use when the component is not controlled."
     },
-    "disabled": { "description": "/** If <code>true</code>, the component is disabled." },
-    "isRtl": {
-      "description": "If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side)."
+    "direction": {
+      "description": "Sets the direction. For right-to-left languages, the lowest value is on the right-hand side."
     },
+    "disabled": { "description": "/** If <code>true</code>, the component is disabled." },
     "largeStep": {
       "description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
     },

docs/translations/api-docs/use-slider/use-slider.json

@@ -7,10 +7,10 @@
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },
-    "disabled": { "description": "If <code>true</code>, the component is disabled." },
-    "isRtl": {
-      "description": "If <code>true</code> the Slider will be rendered right-to-left (with the lowest value on the right-hand side)."
+    "direction": {
+      "description": "Sets the direction. For right-to-left languages, the lowest value is on the right-hand side."
     },
+    "disabled": { "description": "If <code>true</code>, the component is disabled." },
     "largeStep": {
       "description": "The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down."
     },

packages/mui-base/src/Slider/Root/SliderProvider.tsx

@@ -54,6 +54,7 @@ SliderProvider.propTypes /* remove-proptypes */ = {
    */
   value: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     active: PropTypes.number.isRequired,
+    areValuesEqual: PropTypes.func.isRequired,
     'aria-labelledby': PropTypes.string,
     axis: PropTypes.oneOf(['horizontal-reverse', 'horizontal', 'vertical']).isRequired,
     changeValue: PropTypes.func.isRequired,
@@ -62,32 +63,40 @@ SliderProvider.propTypes /* remove-proptypes */ = {
       registerItem: PropTypes.func.isRequired,
       totalSubitemCount: PropTypes.number.isRequired,
     }).isRequired,
+    direction: PropTypes.oneOf(['ltr', 'rtl']).isRequired,
     disabled: PropTypes.bool.isRequired,
     dragging: PropTypes.bool.isRequired,
     getFingerNewValue: PropTypes.func.isRequired,
     handleValueChange: PropTypes.func.isRequired,
-    isRtl: PropTypes.bool.isRequired,
     largeStep: PropTypes.number.isRequired,
     max: PropTypes.number.isRequired,
     min: PropTypes.number.isRequired,
+    minDifferenceBetweenValues: PropTypes.number.isRequired,
     name: PropTypes.string,
     onValueCommitted: PropTypes.func,
     open: PropTypes.number.isRequired,
     orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
     ownerState: PropTypes.shape({
+      activeThumbIndex: PropTypes.number.isRequired,
+      direction: PropTypes.oneOf(['ltr', 'rtl']).isRequired,
       disabled: PropTypes.bool.isRequired,
+      dragging: PropTypes.bool.isRequired,
       max: PropTypes.number.isRequired,
       min: PropTypes.number.isRequired,
-      values: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])
-        .isRequired,
+      minDifferenceBetweenValues: PropTypes.number.isRequired,
+      orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
+      step: PropTypes.number.isRequired,
+      values: PropTypes.arrayOf(PropTypes.number).isRequired,
     }).isRequired,
+    percentageValues: PropTypes.arrayOf(PropTypes.number).isRequired,
+    registerSliderTrack: PropTypes.func.isRequired,
     scale: PropTypes.func.isRequired,
     setActive: PropTypes.func.isRequired,
     setDragging: PropTypes.func.isRequired,
     setOpen: PropTypes.func.isRequired,
     setValueState: PropTypes.func.isRequired,
-    step: PropTypes.number,
-    subitems: PropTypes /* @typescript-to-proptypes-ignore */.object.isRequired,
+    step: PropTypes.number.isRequired,
+    subitems: PropTypes.object.isRequired,
     tabIndex: PropTypes.number,
     values: PropTypes.arrayOf(PropTypes.number).isRequired,
   }).isRequired,

packages/mui-base/src/Slider/Root/SliderRoot.test.tsx

@@ -147,7 +147,7 @@ describe('<Slider.Root />', () => {
     it('should handle RTL', () => {
       const handleValueChange = spy();
       const { getByTestId } = render(
-        <TestSlider isRtl value={30} onValueChange={handleValueChange} />,
+        <TestSlider direction="rtl" value={30} onValueChange={handleValueChange} />,
       );
       const sliderTrack = getByTestId('track');
       const sliderThumb = getByTestId('thumb');
@@ -175,7 +175,7 @@ describe('<Slider.Root />', () => {
     it('increments on ArrowUp', () => {
       const handleValueChange = spy();
       const { container } = render(
-        <TestSlider defaultValue={20} onValueChange={handleValueChange} isRtl />,
+        <TestSlider defaultValue={20} onValueChange={handleValueChange} direction="rtl" />,
       );
 
       const input = container.querySelector('input');
@@ -198,7 +198,7 @@ describe('<Slider.Root />', () => {
     it('increments on ArrowLeft', () => {
       const handleValueChange = spy();
       const { container } = render(
-        <TestSlider defaultValue={20} onValueChange={handleValueChange} isRtl />,
+        <TestSlider defaultValue={20} onValueChange={handleValueChange} direction="rtl" />,
       );
 
       const input = container.querySelector('input');
@@ -221,7 +221,7 @@ describe('<Slider.Root />', () => {
     it('decrements on ArrowDown', () => {
       const handleValueChange = spy();
       const { container } = render(
-        <TestSlider defaultValue={20} onValueChange={handleValueChange} isRtl />,
+        <TestSlider defaultValue={20} onValueChange={handleValueChange} direction="rtl" />,
       );
 
       const input = container.querySelector('input');
@@ -244,7 +244,7 @@ describe('<Slider.Root />', () => {
     it('decrements on ArrowRight', () => {
       const handleValueChange = spy();
       const { container } = render(
-        <TestSlider defaultValue={20} onValueChange={handleValueChange} isRtl />,
+        <TestSlider defaultValue={20} onValueChange={handleValueChange} direction="rtl" />,
       );
 
       const input = container.querySelector('input');

packages/mui-base/src/Slider/Root/SliderRoot.tsx

@@ -15,8 +15,8 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     'aria-labelledby': ariaLabelledby,
     className,
     defaultValue,
+    direction = 'ltr',
     disabled = false,
-    isRtl = false,
     largeStep,
     render,
     minDifferenceBetweenValues,
@@ -31,7 +31,7 @@ const SliderRoot = React.forwardRef(function SliderRoot(
     'aria-labelledby': ariaLabelledby,
     defaultValue,
     disabled,
-    isRtl,
+    direction,
     largeStep,
     minDifferenceBetweenValues,
     onValueChange,
@@ -45,9 +45,9 @@ const SliderRoot = React.forwardRef(function SliderRoot(
   const ownerState: SliderRootOwnerState = React.useMemo(
     () => ({
       activeThumbIndex: slider.active,
+      direction,
       disabled,
       dragging: slider.dragging,
-      isRtl,
       orientation,
       max: slider.max,
       min: slider.min,
@@ -56,8 +56,8 @@ const SliderRoot = React.forwardRef(function SliderRoot(
       values: slider.values,
     }),
     [
+      direction,
       disabled,
-      isRtl,
       orientation,
       slider.active,
       slider.dragging,
@@ -113,17 +113,17 @@ SliderRoot.propTypes /* remove-proptypes */ = {
    * The default value of the slider. Use when the component is not controlled.
    */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  /**
+   * Sets the direction. For right-to-left languages, the lowest value is on the right-hand side.
+   * @default 'ltr'
+   */
+  direction: PropTypes.oneOf(['ltr', 'rtl']),
   /**
    * /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-  /**
-   * If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
-   * @default false
-   */
-  isRtl: PropTypes.bool,
   /**
    * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
    * @default 10