diff --git a/docs/data/base/components/slider/slider.md b/docs/data/base/components/slider/slider.md
index 4734cc628f..d1dc37cc92 100644
--- a/docs/data/base/components/slider/slider.md
+++ b/docs/data/base/components/slider/slider.md
@@ -1,8 +1,8 @@
---
productId: base-ui
title: React Slider components
-components: Slider, SliderRoot, SliderOutput, SliderControl, SliderIndicator, SliderThumb
-hooks: useSlider, useSliderRoot, useSliderOutput, useSliderControl, useSliderIndicator, useSliderThumb
+components: Slider, SliderRoot, SliderOutput, SliderControl, SliderTrack, SliderThumb, SliderIndicator
+hooks: useSlider, useSliderRoot, useSliderOutput, useSliderControl, useSliderThumb, useSliderIndicator
githubLabel: 'component: slider'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
packageName: '@base_ui/react'
diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
index fa6ac3d73f..5d749ff4ed 100644
--- a/docs/data/base/pagesApi.js
+++ b/docs/data/base/pagesApi.js
@@ -99,6 +99,10 @@ module.exports = [
pathname: '/base-ui/react-slider/components-api/#slider-thumb',
title: 'SliderThumb',
},
+ {
+ pathname: '/base-ui/react-slider/components-api/#slider-track',
+ title: 'SliderTrack',
+ },
{
pathname: '/base-ui/react-snackbar/components-api/#snackbar',
title: 'Snackbar',
diff --git a/docs/pages/base-ui/api/slider-track.json b/docs/pages/base-ui/api/slider-track.json
new file mode 100644
index 0000000000..96af06e282
--- /dev/null
+++ b/docs/pages/base-ui/api/slider-track.json
@@ -0,0 +1,19 @@
+{
+ "props": {
+ "className": { "type": { "name": "union", "description": "func
| string" } },
+ "render": { "type": { "name": "union", "description": "element
| func" } }
+ },
+ "name": "SliderTrack",
+ "imports": [
+ "import * as Slider from '@base_ui/react/Slider';\nconst SliderTrack = Slider.Track;"
+ ],
+ "classes": [],
+ "spread": true,
+ "themeDefaultProps": true,
+ "muiName": "SliderTrack",
+ "forwardsRefTo": "HTMLSpanElement",
+ "filename": "/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx",
+ "inheritance": null,
+ "demos": "
",
+ "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/use-slider-track.json b/docs/pages/base-ui/api/use-slider-track.json
new file mode 100644
index 0000000000..26a8777be9
--- /dev/null
+++ b/docs/pages/base-ui/api/use-slider-track.json
@@ -0,0 +1,20 @@
+{
+ "parameters": {
+ "rootRef": {
+ "type": { "name": "React.Ref<Element>", "description": "React.Ref<Element>" }
+ }
+ },
+ "returnValue": {
+ "getRootProps": {
+ "type": {
+ "name": "(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>",
+ "description": "(externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>"
+ },
+ "required": true
+ }
+ },
+ "name": "useSliderTrack",
+ "filename": "/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts",
+ "imports": ["import { useSliderTrack } from '@base_ui/react/Slider';"],
+ "demos": ""
+}
diff --git a/docs/pages/base-ui/react-slider/[docsTab]/index.js b/docs/pages/base-ui/react-slider/[docsTab]/index.js
index 76649ae5eb..f6b39cf395 100644
--- a/docs/pages/base-ui/react-slider/[docsTab]/index.js
+++ b/docs/pages/base-ui/react-slider/[docsTab]/index.js
@@ -9,6 +9,7 @@ import SliderIndicatorApiJsonPageContent from '../../api/slider-indicator.json';
import SliderOutputApiJsonPageContent from '../../api/slider-output.json';
import SliderRootApiJsonPageContent from '../../api/slider-root.json';
import SliderThumbApiJsonPageContent from '../../api/slider-thumb.json';
+import SliderTrackApiJsonPageContent from '../../api/slider-track.json';
import useSliderApiJsonPageContent from '../../api/use-slider.json';
import useSliderControlApiJsonPageContent from '../../api/use-slider-control.json';
import useSliderIndicatorApiJsonPageContent from '../../api/use-slider-indicator.json';
@@ -75,6 +76,13 @@ export const getStaticProps = () => {
);
const SliderThumbApiDescriptions = mapApiPageTranslations(SliderThumbApiReq);
+ const SliderTrackApiReq = require.context(
+ 'docs-base/translations/api-docs/slider-track',
+ false,
+ /\.\/slider-track.*.json$/,
+ );
+ const SliderTrackApiDescriptions = mapApiPageTranslations(SliderTrackApiReq);
+
const useSliderApiReq = require.context(
'docs-base/translations/api-docs/use-slider',
false,
@@ -126,6 +134,7 @@ export const getStaticProps = () => {
SliderOutput: SliderOutputApiDescriptions,
SliderRoot: SliderRootApiDescriptions,
SliderThumb: SliderThumbApiDescriptions,
+ SliderTrack: SliderTrackApiDescriptions,
},
componentsApiPageContents: {
Slider: SliderApiJsonPageContent,
@@ -134,6 +143,7 @@ export const getStaticProps = () => {
SliderOutput: SliderOutputApiJsonPageContent,
SliderRoot: SliderRootApiJsonPageContent,
SliderThumb: SliderThumbApiJsonPageContent,
+ SliderTrack: SliderTrackApiJsonPageContent,
},
hooksApiDescriptions: {
useSlider: useSliderApiDescriptions,
diff --git a/docs/pages/experiments/slider-change-committed-lag.tsx b/docs/pages/experiments/slider-change-committed-lag.tsx
index 95c37022dd..198bad1b9c 100644
--- a/docs/pages/experiments/slider-change-committed-lag.tsx
+++ b/docs/pages/experiments/slider-change-committed-lag.tsx
@@ -23,8 +23,10 @@ export default function App() {
>
-
-
+
+
+
+
diff --git a/docs/pages/experiments/slider-label.tsx b/docs/pages/experiments/slider-label.tsx
index cb7b650418..600a81ac2f 100644
--- a/docs/pages/experiments/slider-label.tsx
+++ b/docs/pages/experiments/slider-label.tsx
@@ -37,8 +37,10 @@ export default function App() {
-
-
+
+
+
+
@@ -48,9 +50,11 @@ export default function App() {
-
-
-
+
+
+
+
+
diff --git a/docs/pages/experiments/slider-rtl.tsx b/docs/pages/experiments/slider-rtl.tsx
index 5ab0a460c4..6ffa26f86d 100644
--- a/docs/pages/experiments/slider-rtl.tsx
+++ b/docs/pages/experiments/slider-rtl.tsx
@@ -8,8 +8,10 @@ export default function App() {
-
-
+
+
+
+
@@ -21,17 +23,21 @@ export default function App() {
>
-
-
+
+
+
+
-
-
-
+
+
+
+
+
@@ -43,9 +49,11 @@ export default function App() {
>
-
-
-
+
+
+
+
+
diff --git a/docs/pages/experiments/slider-track-padding.tsx b/docs/pages/experiments/slider-track-padding.tsx
deleted file mode 100644
index c6114a76fd..0000000000
--- a/docs/pages/experiments/slider-track-padding.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { Styles } from './slider';
-
-export default function App() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/docs/pages/experiments/slider-vertical.tsx b/docs/pages/experiments/slider-vertical.tsx
index a4879184e0..f9a2329cbc 100644
--- a/docs/pages/experiments/slider-vertical.tsx
+++ b/docs/pages/experiments/slider-vertical.tsx
@@ -8,17 +8,21 @@ export default function App() {
-
-
+
+
+
+
-
-
-
+
+
+
+
+
diff --git a/docs/pages/experiments/slider.tsx b/docs/pages/experiments/slider.tsx
index 189c9602fd..e261cff625 100644
--- a/docs/pages/experiments/slider.tsx
+++ b/docs/pages/experiments/slider.tsx
@@ -12,35 +12,43 @@ export default function App() {
-
-
+
+
+
+
-
-
+
+
+
+
-
-
-
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
@@ -54,8 +62,10 @@ export default function App() {
>
-
-
+
+
+
+
@@ -68,9 +78,11 @@ export default function App() {
>
-
-
-
+
+
+
+
+
@@ -83,9 +95,11 @@ export default function App() {
>
- {val3.map((_val, idx) => (
-
- ))}
+
+ {val3.map((_val, idx) => (
+
+ ))}
+
@@ -126,6 +140,8 @@ export function Styles() {
}
.MySlider {
+ --slider-track-height: 2px;
+
width: 100%;
margin: 16px 0;
align-items: center;
@@ -158,17 +174,15 @@ export function Styles() {
touch-action: none;
}
- .MySlider-control::before {
- content: '';
+ .MySlider-track {
width: 100%;
- height: 2px;
+ height: var(--slider-track-height);
border-radius: 9999px;
background-color: gainsboro;
touch-action: none;
}
.MySlider-indicator {
- height: 2px;
border-radius: 9999px;
background-color: black;
}
@@ -180,6 +194,11 @@ export function Styles() {
border-radius: 50%;
background-color: black;
touch-action: none;
+ transform: translate(-50%, calc(calc(var(--slider-track-height)/2) - 50%));
+ }
+
+ [dir='rtl'] .MySlider-thumb {
+ transform: translate(50%, calc(calc(var(--slider-track-height)/2) - 50%));
}
.MySlider-thumb:focus-visible {
@@ -200,6 +219,8 @@ export function Styles() {
}
.VerticalSlider {
+ --vertical-slider-track-width: 2px;
+
height: 100%;
width: 5rem;
margin: 1rem 0;
@@ -228,10 +249,9 @@ export function Styles() {
touch-action: none;
}
- .VerticalSlider-control:before {
- content: '';
+ .VerticalSlider-track {
height: 100%;
- width: 2px;
+ width: var(--vertical-slider-track-width);
border-radius: 9999px;
background-color: gainsboro;
touch-action: none;
@@ -250,6 +270,11 @@ export function Styles() {
border-radius: 50%;
background-color: black;
touch-action: none;
+ transform: translate(calc(calc(var(--vertical-slider-track-width)/2) - 50%), 50%);
+ }
+
+ [dir='rtl'] .VerticalSlider-thumb {
+ transform: translate(calc(50% - calc(var(--vertical-slider-track-width)/2)), 50%);
}
.VerticalSlider-thumb:focus-visible {
diff --git a/docs/translations/api-docs/slider-track/slider-track.json b/docs/translations/api-docs/slider-track/slider-track.json
new file mode 100644
index 0000000000..4bc12cf1e0
--- /dev/null
+++ b/docs/translations/api-docs/slider-track/slider-track.json
@@ -0,0 +1,10 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "className": {
+ "description": "Class names applied to the element or a function that returns them based on the component's state."
+ },
+ "render": { "description": "A function to customize rendering of the component." }
+ },
+ "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/use-slider-track/use-slider-track.json b/docs/translations/api-docs/use-slider-track/use-slider-track.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-slider-track/use-slider-track.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts b/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts
index 23326462e8..7909c9f0b6 100644
--- a/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts
+++ b/packages/mui-base/src/Slider/SliderIndicator/useSliderIndicator.ts
@@ -9,15 +9,15 @@ import {
const axisProps = {
horizontal: {
offset: (percent: number) => ({ left: `${percent}%` }),
- leap: (percent: number) => ({ width: `${percent}%` }),
+ leap: (percent: number) => ({ width: `${percent}%`, height: 'inherit' }),
},
'horizontal-reverse': {
offset: (percent: number) => ({ right: `${percent}%` }),
- leap: (percent: number) => ({ width: `${percent}%` }),
+ leap: (percent: number) => ({ width: `${percent}%`, height: 'inherit' }),
},
vertical: {
offset: (percent: number) => ({ bottom: `${percent}%` }),
- leap: (percent: number) => ({ height: `${percent}%` }),
+ leap: (percent: number) => ({ height: `${percent}%`, width: 'inherit' }),
},
};
/**
@@ -55,12 +55,14 @@ function useSliderIndicator(
position: 'absolute',
bottom: 0,
height: `${percentageValues[0]}%`,
+ width: 'inherit',
};
} else {
internalStyles = {
position: 'absolute',
[isRtl ? 'right' : 'left']: 0,
width: `${percentageValues[0]}%`,
+ height: 'inherit',
};
}
diff --git a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
index 0373cf3e6c..9490b8dc6d 100644
--- a/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
+++ b/packages/mui-base/src/Slider/SliderThumb/useSliderThumb.ts
@@ -92,7 +92,7 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
const isRtl = direction === 'rtl';
const getThumbStyle = React.useCallback(() => {
- const isVertical = orientation === 'vertical';
+ // const isVertical = orientation === 'vertical';
return {
position: 'absolute',
[{
@@ -100,12 +100,12 @@ export function useSliderThumb(parameters: UseSliderThumbParameters) {
'horizontal-reverse': 'right',
vertical: 'bottom',
}[axis]]: `${percent}%`,
- transform: `translate${isVertical ? 'Y' : 'X'}(${(isVertical || isRtl ? 1 : -1) * 50}%)`,
+ // transform: `translate${isVertical ? 'Y' : 'X'}(${(isVertical || isRtl ? 1 : -1) * 50}%)`,
// So the non active thumb doesn't show its label on hover.
pointerEvents: activeIndex !== -1 && activeIndex !== index ? 'none' : undefined,
zIndex: activeIndex === index ? 1 : undefined,
};
- }, [activeIndex, axis, isRtl, orientation, percent, index]);
+ }, [activeIndex, axis, /* isRtl, orientation, */ percent, index]);
const getRootProps: UseSliderThumbReturnValue['getRootProps'] = React.useCallback(
(externalProps = {}) => {
diff --git a/packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx
new file mode 100644
index 0000000000..ee305bf5b6
--- /dev/null
+++ b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.test.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Slider from '@base_ui/react/Slider';
+import { SliderProvider, type SliderProviderValue } from '@base_ui/react/Slider';
+import { describeConformance } from '../../../test/describeConformance';
+
+const NOOP = () => {};
+
+describe('', () => {
+ const { render } = createRenderer();
+
+ const testProviderValue: SliderProviderValue = {
+ active: -1,
+ areValuesEqual: () => true,
+ axis: 'horizontal',
+ changeValue: NOOP,
+ compoundComponentContextValue: {
+ registerItem: () => ({ id: 0, deregister: () => {} }),
+ getItemIndex: () => 0,
+ totalSubitemCount: 1,
+ },
+ dragging: false,
+ disabled: false,
+ getFingerNewValue: () => ({
+ newValue: 0,
+ activeIndex: 0,
+ newPercentageValue: 0,
+ }),
+ handleValueChange: NOOP,
+ direction: 'ltr',
+ largeStep: 10,
+ max: 100,
+ min: 0,
+ minStepsBetweenValues: 0,
+ open: -1,
+ orientation: 'horizontal',
+ ownerState: {
+ activeThumbIndex: -1,
+ disabled: false,
+ dragging: false,
+ direction: 'ltr',
+ max: 100,
+ min: 0,
+ minStepsBetweenValues: 0,
+ orientation: 'horizontal',
+ step: 1,
+ values: [0],
+ },
+ percentageValues: [0],
+ registerSliderControl: NOOP,
+ scale: (val) => val,
+ setActive: NOOP,
+ setDragging: NOOP,
+ setOpen: NOOP,
+ setValueState: NOOP,
+ step: 1,
+ subitems: new Map(),
+ values: [0],
+ };
+
+ describeConformance(, () => ({
+ inheritComponent: 'span',
+ render: (node) => {
+ const { container, ...other } = render(
+ {node},
+ );
+
+ return { container, ...other };
+ },
+ refInstanceof: window.HTMLSpanElement,
+ skip: [
+ 'reactTestRenderer', // Need to be wrapped with SliderProvider
+ ],
+ }));
+});
diff --git a/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx
new file mode 100644
index 0000000000..0673a138ec
--- /dev/null
+++ b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.tsx
@@ -0,0 +1,54 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useSliderContext } from '../Root/SliderProvider';
+import { sliderStyleHookMapping } from '../Root/styleHooks';
+import { SliderTrackProps } from './SliderTrack.types';
+import { useSliderTrack } from './useSliderTrack';
+
+const SliderTrack = React.forwardRef(function SliderTrack(
+ props: SliderTrackProps,
+ forwardedRef: React.ForwardedRef,
+) {
+ const { render, className, ...otherProps } = props;
+
+ const { ownerState } = useSliderContext();
+
+ const { getRootProps } = useSliderTrack({
+ rootRef: forwardedRef,
+ });
+
+ const { renderElement } = useComponentRenderer({
+ propGetter: getRootProps,
+ render: render ?? 'span',
+ ownerState,
+ className,
+ ref: forwardedRef,
+ extraProps: otherProps,
+ customStyleHookMapping: sliderStyleHookMapping,
+ });
+
+ return renderElement();
+});
+
+SliderTrack.propTypes /* remove-proptypes */ = {
+ // ┌────────────────────────────── Warning ──────────────────────────────┐
+ // │ These PropTypes are generated from the TypeScript type definitions. │
+ // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+ // └─────────────────────────────────────────────────────────────────────┘
+ /**
+ * @ignore
+ */
+ children: PropTypes.node,
+ /**
+ * Class names applied to the element or a function that returns them based on the component's state.
+ */
+ className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ /**
+ * A function to customize rendering of the component.
+ */
+ render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { SliderTrack };
diff --git a/packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts
new file mode 100644
index 0000000000..00905038b4
--- /dev/null
+++ b/packages/mui-base/src/Slider/SliderTrack/SliderTrack.types.ts
@@ -0,0 +1,14 @@
+import { BaseUIComponentProps } from '../../utils/types';
+import { SliderRootOwnerState } from '../Root/SliderRoot.types';
+
+export interface SliderTrackProps extends BaseUIComponentProps<'span', SliderRootOwnerState> {}
+
+export interface UseSliderTrackParameters {
+ rootRef?: React.Ref;
+}
+
+export interface UseSliderTrackReturnValue {
+ getRootProps: (
+ externalProps?: React.ComponentPropsWithRef<'span'>,
+ ) => React.ComponentPropsWithRef<'span'>;
+}
diff --git a/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts b/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts
new file mode 100644
index 0000000000..f01664f33b
--- /dev/null
+++ b/packages/mui-base/src/Slider/SliderTrack/useSliderTrack.ts
@@ -0,0 +1,31 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { UseSliderTrackParameters, UseSliderTrackReturnValue } from './SliderTrack.types';
+/**
+ *
+ * API:
+ *
+ * - [useSliderTrack API](https://mui.com/base-ui/api/use-slider-track/)
+ */
+function useSliderTrack(parameters: UseSliderTrackParameters): UseSliderTrackReturnValue {
+ const { rootRef } = parameters;
+
+ const getRootProps = React.useCallback(
+ (externalProps = {}) => {
+ return mergeReactProps(externalProps, {
+ ref: rootRef,
+ });
+ },
+ [rootRef],
+ );
+
+ return React.useMemo(
+ () => ({
+ getRootProps,
+ }),
+ [getRootProps],
+ );
+}
+
+export { useSliderTrack };
diff --git a/packages/mui-base/src/Slider/index.barrel.ts b/packages/mui-base/src/Slider/index.barrel.ts
index 4bcbe6a40d..d43d0c23d7 100644
--- a/packages/mui-base/src/Slider/index.barrel.ts
+++ b/packages/mui-base/src/Slider/index.barrel.ts
@@ -3,14 +3,13 @@ export type * from './Root/SliderRoot.types';
export { useSliderRoot } from './Root/useSliderRoot';
export * from './Root/SliderProvider';
-export { SliderThumb } from './SliderThumb/SliderThumb';
+export { SliderOutput } from './SliderOutput/SliderOutput';
export type {
- SliderThumbOwnerState,
- SliderThumbProps,
- UseSliderThumbParameters,
- UseSliderThumbReturnValue,
-} from './SliderThumb/SliderThumb.types';
-export { useSliderThumb } from './SliderThumb/useSliderThumb';
+ SliderOutputProps as OutputProps,
+ UseSliderOutputParameters,
+ UseSliderOutputReturnValue,
+} from './SliderOutput/SliderOutput.types';
+export { useSliderOutput } from './SliderOutput/useSliderOutput';
export { SliderControl } from './SliderControl/SliderControl';
export type {
@@ -20,6 +19,23 @@ export type {
} from './SliderControl/SliderControl.types';
export { useSliderControl } from './SliderControl/useSliderControl';
+export { SliderTrack } from './SliderTrack/SliderTrack';
+export type {
+ SliderTrackProps,
+ UseSliderTrackParameters,
+ UseSliderTrackReturnValue,
+} from './SliderTrack/SliderTrack.types';
+export { useSliderTrack } from './SliderTrack/useSliderTrack';
+
+export { SliderThumb } from './SliderThumb/SliderThumb';
+export type {
+ SliderThumbOwnerState,
+ SliderThumbProps,
+ UseSliderThumbParameters,
+ UseSliderThumbReturnValue,
+} from './SliderThumb/SliderThumb.types';
+export { useSliderThumb } from './SliderThumb/useSliderThumb';
+
export { SliderIndicator } from './SliderIndicator/SliderIndicator';
export type {
SliderIndicatorProps as IndicatorProps,
@@ -27,11 +43,3 @@ export type {
UseSliderIndicatorReturnValue,
} from './SliderIndicator/SliderIndicator.types';
export { useSliderIndicator } from './SliderIndicator/useSliderIndicator';
-
-export { SliderOutput } from './SliderOutput/SliderOutput';
-export type {
- SliderOutputProps as OutputProps,
- UseSliderOutputParameters,
- UseSliderOutputReturnValue,
-} from './SliderOutput/SliderOutput.types';
-export { useSliderOutput } from './SliderOutput/useSliderOutput';
diff --git a/packages/mui-base/src/Slider/index.ts b/packages/mui-base/src/Slider/index.ts
index a517ed9aaa..a5178b2cd3 100644
--- a/packages/mui-base/src/Slider/index.ts
+++ b/packages/mui-base/src/Slider/index.ts
@@ -12,14 +12,13 @@ export {
export { useSliderRoot } from './Root/useSliderRoot';
export * from './Root/SliderProvider';
-export { SliderThumb as Thumb } from './SliderThumb/SliderThumb';
+export { SliderOutput as Output } from './SliderOutput/SliderOutput';
export type {
- SliderThumbOwnerState as ThumbOwnerState,
- SliderThumbProps as ThumbProps,
- UseSliderThumbParameters,
- UseSliderThumbReturnValue,
-} from './SliderThumb/SliderThumb.types';
-export { useSliderThumb } from './SliderThumb/useSliderThumb';
+ SliderOutputProps as OutputProps,
+ UseSliderOutputParameters,
+ UseSliderOutputReturnValue,
+} from './SliderOutput/SliderOutput.types';
+export { useSliderOutput } from './SliderOutput/useSliderOutput';
export { SliderControl as Control } from './SliderControl/SliderControl';
export type {
@@ -29,6 +28,23 @@ export type {
} from './SliderControl/SliderControl.types';
export { useSliderControl } from './SliderControl/useSliderControl';
+export { SliderTrack as Track } from './SliderTrack/SliderTrack';
+export type {
+ SliderTrackProps as TrackProps,
+ UseSliderTrackParameters,
+ UseSliderTrackReturnValue,
+} from './SliderTrack/SliderTrack.types';
+export { useSliderTrack } from './SliderTrack/useSliderTrack';
+
+export { SliderThumb as Thumb } from './SliderThumb/SliderThumb';
+export type {
+ SliderThumbOwnerState as ThumbOwnerState,
+ SliderThumbProps as ThumbProps,
+ UseSliderThumbParameters,
+ UseSliderThumbReturnValue,
+} from './SliderThumb/SliderThumb.types';
+export { useSliderThumb } from './SliderThumb/useSliderThumb';
+
export { SliderIndicator as Indicator } from './SliderIndicator/SliderIndicator';
export type {
SliderIndicatorProps as IndicatorProps,
@@ -36,11 +52,3 @@ export type {
UseSliderIndicatorReturnValue,
} from './SliderIndicator/SliderIndicator.types';
export { useSliderIndicator } from './SliderIndicator/useSliderIndicator';
-
-export { SliderOutput as Output } from './SliderOutput/SliderOutput';
-export type {
- SliderOutputProps as OutputProps,
- UseSliderOutputParameters,
- UseSliderOutputReturnValue,
-} from './SliderOutput/SliderOutput.types';
-export { useSliderOutput } from './SliderOutput/useSliderOutput';