Slider with label example

docs/pages/experiments/slider-label.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react';
+import * as Slider from '@base_ui/react/Slider2';
+import { valueToPercent } from '@base_ui/react/Slider2/utils';
+import { useSliderContext } from '@base_ui/react/Slider2';
+import { useId } from '@base_ui/react/utils/useId';
+
+function TrackFillSingleThumb(props: any) {
+  const { value: values, min, max } = useSliderContext('Track');
+  const value = values[0];
+  const { style, ...otherProps } = props;
+  const percent = valueToPercent(value, min, max);
+
+  return (
+    <span
+      {...otherProps}
+      style={{
+        width: `${percent}%`,
+        ...style,
+      }}
+    />
+  );
+}
+
+function TrackFillRange(props: any) {
+  const { axis, axisProps, min, max, value: values } = useSliderContext('Track');
+  const { style, ...otherProps } = props;
+
+  const trackOffset = valueToPercent(values[0], min, max);
+  const trackLeap = valueToPercent(values[values.length - 1], min, max) - trackOffset;
+
+  return (
+    <span
+      {...otherProps}
+      style={{
+        ...axisProps[axis].offset(trackOffset),
+        ...axisProps[axis].leap(trackLeap),
+        ...style,
+      }}
+    />
+  );
+}
+
+function Label(props: any) {
+  const { id: idProp, ...otherProps } = props;
+
+  const labelId = useId(idProp);
+
+  const { subitems } = useSliderContext('Label');
+
+  const htmlFor = Array.from(subitems.values())
+    .reduce((acc, item) => {
+      return `${acc} ${item.inputId}`;
+    }, '')
+    .trim();
+
+  return <label id={labelId} htmlFor={htmlFor} {...otherProps} />;
+}
+
+function LabelRange(props: any) {
+  const { id: idProp, ...otherProps } = props;
+
+  const labelId = useId(idProp);
+
+  // const { subitems } = useSliderContext('Label');
+
+  // const htmlFor = Array.from(subitems.values())[0]?.inputId ?? '';
+
+  return <span id={labelId} {...otherProps} />;
+}
+
+export default function App() {
+  return (
+    <div className="SliderDemo">
+      <Slider.Root
+        className="MySlider"
+        defaultValue={50}
+        render={<span />}
+        aria-labelledby="LabelId"
+      >
+        <Label id="LabelId">Label</Label>
+        <Slider.Output className="MySlider-output" />
+        <Slider.Track className="MySlider-track">
+          <TrackFillSingleThumb className="MySlider-track-fill" />
+          <Slider.Thumb className="MySlider-thumb one" />
+        </Slider.Track>
+      </Slider.Root>
+
+      <Slider.Root
+        className="MySlider"
+        defaultValue={[50, 70]}
+        render={<span />}
+        aria-labelledby="LabelRangeId"
+      >
+        <LabelRange id="LabelRangeId">Range Label</LabelRange>
+        <Slider.Output className="MySlider-output" />
+        <Slider.Track className="MySlider-track">
+          <TrackFillRange className="MySlider-track-fill" />
+          <Slider.Thumb className="MySlider-thumb one" />
+          <Slider.Thumb className="MySlider-thumb two" />
+        </Slider.Track>
+      </Slider.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function Styles() {
+  const isDarkMode = false;
+  return (
+    <style>{`
+    .SliderDemo {
+      font-family: system-ui, sans-serif;
+      width: 320px;
+    }
+
+    .MySlider {
+      width: 100%;
+      margin: 16px 0;
+      align-items: center;
+      position: relative;
+      -webkit-tap-highlight-color: transparent;
+      display: grid;
+      grid-auto-rows: 1.5rem auto;
+      grid-gap: 1rem;
+    }
+
+    .MySlider-output {
+      text-align: right;
+      font-size: .875rem;
+    }
+
+    .MySlider-track {
+      display: flex;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: 2px;
+      border-radius: 9999px;
+      background-color: gainsboro;
+      touch-action: none;
+    }
+
+    .MySlider-track-fill {
+      display: block;
+      position: absolute;
+      height: 100%;
+      border-radius: 9999px;
+      background-color: black;
+    }
+
+    .MySlider-thumb {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      background-color: black;
+      transform: translateX(-50%);
+      touch-action: none;
+    }
+
+    .MySlider-thumb:focus-within {
+      outline: 2px solid black;
+      outline-offset: 2px;
+    }
+
+    .MySlider-thumb[data-active] {
+      background-color: pink;
+    }
+
+    .MySlider-thumb:has(input:disabled) {
+      background-color: ${isDarkMode ? grey[600] : grey[300]};
+    }
+
+    .MySlider[data-disabled] {
+      cursor: not-allowed;
+    }
+    `}</style>
+  );
+}

packages/mui-base/src/Slider2/Root/useSliderRoot.ts

@@ -386,7 +386,7 @@ function useSliderRoot(parameters: UseSliderParameters): UseSliderReturnValue {
     () => ({
       getRootProps,
       active,
-      ariaLabelledby,
+      'aria-labelledby': ariaLabelledby,
       axis,
       axisProps,
       changeValue,