From f85e02cda95ee5a02726a1fc1164868c2a05e297 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Mon, 21 Sep 2026 08:22:41 -0300
Subject: [PATCH] feat(BBBSlider): add slider component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The library has no slider, so every range control in BigBlueButton
ships its own: the camera modal drives brightness with a raw
`input[type=range]` plus hand-positioned markers, while the profile
panel uses a bare MUI `Slider` with local `styled()` overrides. The
two disagree on range, on styling and on how the value is announced.

Add `BBBSlider`, a horizontal single-thumb wrapper around MUI's
`Slider`, so those call sites collapse onto one control. Its
appearance matches what the profile panel renders today — MUI's
defaults carrying the brand colour — so adopting it changes no pixels
there.

Three things are handled by the wrapper rather than left to callers,
because MUI gets them wrong by default in this context:

- `id` and `aria-describedby` are routed into the hidden range input
  through `slotProps.input`. MUI puts unrecognized props on the root
  `<span>`, which makes `<label htmlFor>` associate with nothing and
  silently strands the description on a non-focusable element.
- Right-to-left takes three separate repairs. The ambient direction is
  read from the DOM and re-provided to MUI through `ThemeProvider`,
  since `useRtl()` defaults to false and the client sets no theme
  direction. That switches MUI to right-anchored positioning but not
  the transforms paired with it, which normally come from an emotion
  cache running `stylis-plugin-rtl`, so the thumb and the marks are
  mirrored here instead — without it every one of them sits a full
  element width off and the thumb detaches from the track. The numeric
  labels also carry `unicode-bidi: plaintext`, without which a leading
  minus is reordered and `-100` paints as `100-`. `ThemeProvider`
  comes from `@mui/material/styles`, not `@mui/system`, so the context
  is the same module instance that renders the slider.
- The public props narrow MUI's `number | number[]` value and handlers
  down to `number`, and drop `orientation`, so the single-thumb
  horizontal scope is enforced by the types.

Two props cover what the call sites need beyond MUI's own API:
`showMarkTicks` keeps mark labels while hiding their tick dots, which
is what the camera modal's -100/0/100 scale needs, and `animate`
turns off every transition and hover effect. The keyboard focus ring
survives `animate={false}`, since removing it would leave the control
with no visible focus state.

The README covers the two usage patterns the component was designed
for — a value the user reads (volume) and one they only feel
(brightness) — along with the rules that are easy to get wrong.
---
 README.md                                   |   1 +
 package.json                                |  10 +
 src/components/Slider/README.md             | 137 ++++++++++++
 src/components/Slider/assets/example.png    | Bin 0 -> 3224 bytes
 src/components/Slider/component.stories.tsx | 232 ++++++++++++++++++++
 src/components/Slider/component.tsx         | 110 ++++++++++
 src/components/Slider/constants.ts          |  10 +
 src/components/Slider/index.ts              |   1 +
 src/components/Slider/styles.ts             | 167 ++++++++++++++
 src/components/Slider/types.ts              |  67 ++++++
 src/components/index.ts                     |   1 +
 webpack.config.babel.js                     |   1 +
 12 files changed, 737 insertions(+)
 create mode 100644 src/components/Slider/README.md
 create mode 100644 src/components/Slider/assets/example.png
 create mode 100644 src/components/Slider/component.stories.tsx
 create mode 100644 src/components/Slider/component.tsx
 create mode 100644 src/components/Slider/constants.ts
 create mode 100644 src/components/Slider/index.ts
 create mode 100644 src/components/Slider/styles.ts
 create mode 100644 src/components/Slider/types.ts

diff --git a/README.md b/README.md
index 223b759..ef4b118 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Below is a list of the components available in this library. Each component has
 - [BBBScrollArea](./src/components/ScrollArea/README.md)
 - [BBBSearch](./src/components/Search/README.md)
 - [BBBSelect](./src/components/Select/README.md)
+- [BBBSlider](./src/components/Slider/README.md)
 - [BBBSpinner](./src/components/Spinner//README.md)
 - [BBBTextAreaInput](./src/components/TextAreaInput/README.md)
 - [BBBTextInput](./src/components/TextInput/README.md)
diff --git a/package.json b/package.json
index bea56d7..6d53f7a 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,13 @@
       "require": "./dist/components/Select.js",
       "default": "./dist/components/Select.js"
     },
+    "./Slider": {
+      "types": "./dist/types/components/Slider/index.d.ts",
+      "node": "./dist/components/Slider.js",
+      "import": "./dist/esm/components/Slider/index.js",
+      "require": "./dist/components/Slider.js",
+      "default": "./dist/components/Slider.js"
+    },
     "./Spinner": {
       "types": "./dist/types/components/Spinner/index.d.ts",
       "node": "./dist/components/Spinner.js",
@@ -211,6 +218,9 @@
       "Select": [
         "dist/types/components/Select/index.d.ts"
       ],
+      "Slider": [
+        "dist/types/components/Slider/index.d.ts"
+      ],
       "Spinner": [
         "dist/types/components/Spinner/index.d.ts"
       ],
diff --git a/src/components/Slider/README.md b/src/components/Slider/README.md
new file mode 100644
index 0000000..ae036d9
--- /dev/null
+++ b/src/components/Slider/README.md
@@ -0,0 +1,137 @@
+# BBBSlider
+
+The `BBBSlider` component provides a horizontal, single-thumb slider for picking a value inside a
+range. It supports labels (`label` and `helperText`), decorative end icons, marks with or without
+tick dots, and a value tooltip.
+
+![Demo](assets/example.png)
+
+## Usage Example
+
+### Slider with a label
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+
+<BBBSlider label="Brightness" defaultValue={50} />
+```
+
+### Volume, where the number matters
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+
+<BBBSlider
+  label="Volume"
+  min={0}
+  max={100}
+  defaultValue={50}
+  valueLabelDisplay="on"
+  valueLabelFormat={(value) => `${value}%`}
+  getAriaValueText={(value) => `${value} percent`}
+  dataTest="volume-slider"
+  onChange={(event, value) => setVolume(value)}
+/>
+```
+
+### Brightness, where the number does not matter
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+import { MdBrightnessLow, MdBrightnessHigh } from 'react-icons/md';
+
+<BBBSlider
+  label="Brightness"
+  min={-100}
+  max={100}
+  defaultValue={0}
+  iconStart={<MdBrightnessLow />}
+  iconEnd={<MdBrightnessHigh />}
+  valueLabelDisplay="off"
+  onChange={(event, value) => setBrightness(value)}
+/>
+```
+
+### Discrete stages with labels only
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+
+<BBBSlider
+  label="Webcam grid size"
+  min={1}
+  max={4}
+  step={1}
+  showMarkTicks={false}
+  marks={[
+    { value: 1, label: '1x1' },
+    { value: 2, label: '2x2' },
+    { value: 3, label: '3x3' },
+    { value: 4, label: '4x4' },
+  ]}
+  defaultValue={2}
+  onChangeCommitted={(event, value) => setGridSize(value)}
+/>
+```
+
+## Accessibility
+
+- Give every slider an accessible name: either `label` (which also renders visible text and is
+  wired to the input with `htmlFor`) or `ariaLabel` when the design has no visible label.
+- `helperText` is referenced by the input's `aria-describedby` automatically; `ariaDescribedBy`
+  overrides it when the description lives elsewhere on the page.
+- When `valueLabelFormat` shows something other than the raw value, pass the matching
+  `getAriaValueText` so screen readers announce what the user sees.
+- Keyboard support comes from MUI: arrows move by `step`, Page Up/Page Down jump, Home/End go to
+  the ends.
+
+## Testing
+
+`dataTest` lands on the root element, and the focusable range input gets the same value suffixed
+with `-input`. Drive the input, not the root:
+
+```js
+await page.locator('[data-test="volume-slider-input"]').fill('80');
+```
+
+## Notes
+
+The value tooltip is rendered inside the slider, so a container with `overflow: hidden` can clip it
+when the slider sits at the very top of the container. Use `valueLabelDisplay="off"` or reserve
+vertical space above the slider in that case.
+
+Mark labels are centred on their tick, so the labels at `min` and `max` extend half their width past
+each end of the track. Reserve horizontal padding around the slider, or avoid labelling the extreme
+marks, when the container clips.
+
+`iconStart`/`iconEnd` render at `1.5rem` by default, matching a circle `BBButton`; pass a `size` on
+the icon itself to override it.
+
+## Props
+
+| Property            | Type                                                              | Default  | Description                                                                                                                    |
+| ------------------- | ------------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `label`             | `string`                                                            |          | The main label text displayed above the slider.                                                                                   |
+| `helperText`        | `string`                                                            |          | The helper text displayed below the label.                                                                                        |
+| `value`             | `number`                                                            |          | The current value; providing it makes the slider controlled.                                                                      |
+| `defaultValue`      | `number`                                                            |          | The initial value used while the slider is uncontrolled.                                                                          |
+| `min`               | `number`                                                            | `0`      | The minimum allowed value.                                                                                                         |
+| `max`               | `number`                                                            | `100`    | The maximum allowed value.                                                                                                         |
+| `step`              | `number \| null`                                                    | `1`      | The granularity the value moves by; `null` snaps to `marks`.                                                                      |
+| `marks`             | `boolean \| { value: number, label?: ReactNode }[]`                 | `false`  | The marks rendered on the track.                                                                                                   |
+| `showMarkTicks`     | `boolean`                                                           | `true`   | If `false`, renders the mark labels without their tick dots.                                                                      |
+| `animate`           | `boolean`                                                           | `true`   | If `false`, disables transitions and hover/drag visual effects so state changes render instantly.                                 |
+| `valueLabelDisplay` | `'auto' \| 'on' \| 'off'`                                           | `'auto'` | When the value tooltip is shown.                                                                                                   |
+| `valueLabelFormat`  | `string \| ((value: number, index: number) => ReactNode)`           |          | Formats the value shown in the tooltip.                                                                                            |
+| `getAriaValueText`  | `(value: number, index: number) => string`                          |          | The text screen readers announce for the current value.                                                                           |
+| `iconStart`         | `React.ReactNode`                                                   |          | A decorative node rendered at the minimum end; it is hidden from screen readers.                                                  |
+| `iconEnd`           | `React.ReactNode`                                                   |          | A decorative node rendered at the maximum end; it is hidden from screen readers.                                                  |
+| `disabled`          | `boolean`                                                           | `false`  | If `true`, the slider is disabled and unresponsive.                                                                               |
+| `onChange`          | `(event: Event, value: number) => void`                             |          | Fired continuously while the user drags or presses a key.                                                                         |
+| `onChangeCommitted` | `(event: React.SyntheticEvent \| Event, value: number) => void`     |          | Fired once, when the interaction ends; prefer it for expensive updates.                                                           |
+| `id`                | `string`                                                            |          | The HTML `id` of the underlying range input; auto-generated when omitted.                                                         |
+| `dataTest`          | `string`                                                            |          | The `data-test` attribute for the root; the range input gets `${dataTest}-input`.                                                 |
+| `ariaLabel`         | `string`                                                            |          | The accessible name for the slider.                                                                                               |
+| `ariaLabelledBy`    | `string`                                                            |          | The ID of the element that labels the slider; ignored when `ariaLabel` is set, and falls back to the rendered label's id when omitted. |
+| `ariaDescribedBy`   | `string`                                                            |          | The ID of the element that describes the slider; falls back to the rendered helper text's id when omitted.                        |
+| `...props`          | `MuiSliderProps`                                                    |          | Any other props are passed down to the underlying Material-UI Slider component.                                                   |
diff --git a/src/components/Slider/assets/example.png b/src/components/Slider/assets/example.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6066783528e3df1866f1b3051ca896a37541cf2
GIT binary patch
literal 3224
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
KMNUMnLSTYUEJro~

literal 0
HcmV?d00001

diff --git a/src/components/Slider/component.stories.tsx b/src/components/Slider/component.stories.tsx
new file mode 100644
index 0000000..c329062
--- /dev/null
+++ b/src/components/Slider/component.stories.tsx
@@ -0,0 +1,232 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MdBrightnessLow, MdBrightnessHigh } from 'react-icons/md';
+import BBBSlider from './component';
+import { VALUE_LABEL_DISPLAY_VALUES, DEFAULT_VALUE_LABEL_DISPLAY } from './constants';
+
+const meta = {
+  title: 'BBBSlider',
+  component: BBBSlider,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Main label text displayed above the slider.',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text displayed below the label.',
+    },
+    min: {
+      control: 'number',
+      description: 'Minimum allowed value.',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum allowed value.',
+    },
+    step: {
+      control: 'number',
+      description: 'Granularity the value can move by; use null with marks to snap to them.',
+    },
+    marks: {
+      control: 'object',
+      description: 'Marks to render on the track; true spreads them by step, or pass an array with labels.',
+    },
+    showMarkTicks: {
+      control: 'boolean',
+      description: 'Renders the tick dots of `marks`; set to false to keep the mark labels only.',
+      table: { defaultValue: { summary: 'true' } },
+    },
+    animate: {
+      control: 'boolean',
+      description: 'Enables transitions and hover/drag visual effects; set to false for instant state changes.',
+      table: { defaultValue: { summary: 'true' } },
+    },
+    valueLabelDisplay: {
+      control: 'select',
+      options: VALUE_LABEL_DISPLAY_VALUES,
+      description: 'Controls when the value tooltip is shown.',
+      table: { defaultValue: { summary: `${DEFAULT_VALUE_LABEL_DISPLAY}` } },
+    },
+    iconStart: {
+      control: false,
+      description: 'Decorative node rendered at the minimum end of the track.',
+    },
+    iconEnd: {
+      control: false,
+      description: 'Decorative node rendered at the maximum end of the track.',
+    },
+    valueLabelFormat: {
+      control: false,
+      description: 'Formats the value shown in the tooltip; receives the raw value.',
+    },
+    getAriaValueText: {
+      control: false,
+      description: 'Returns the text screen readers announce for the current value.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the slider when true.',
+    },
+    dataTest: {
+      control: 'text',
+      description: 'Value for the data-test attribute on the root; the range input gets `${dataTest}-input`.',
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible name for the slider.',
+    },
+    onChange: {
+      control: false,
+      description: 'Change handler fired continuously while the user drags or presses a key.',
+    },
+    onChangeCommitted: {
+      control: false,
+      description: 'Change handler fired once, when the interaction ends.',
+    },
+  },
+} satisfies Meta<typeof BBBSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Bare slider with no label, covering the default 0-100 range. */
+export const Default: Story = {
+  args: { defaultValue: 50, ariaLabel: 'Volume' },
+};
+
+/** Visible label and helper text; clicking the label focuses the slider. */
+export const WithLabel: Story = {
+  args: { label: 'Brightness', helperText: 'Applies to the whole image', defaultValue: 50 },
+};
+
+/** Disabled state, which keeps the label readable but blocks interaction. */
+export const Disabled: Story = {
+  args: { label: 'Brightness', defaultValue: 50, disabled: true },
+};
+
+/** Decorative icons at both ends, the brightness pattern where the number itself is irrelevant. */
+export const WithIcons: Story = {
+  args: {
+    label: 'Brightness',
+    iconStart: <MdBrightnessLow />,
+    iconEnd: <MdBrightnessHigh />,
+    valueLabelDisplay: 'off',
+    min: -100,
+    max: 100,
+    defaultValue: 0,
+    ariaLabel: 'Camera brightness',
+  },
+};
+
+/** Discrete stages with labelled marks, snapping to each step. */
+export const WithMarks: Story = {
+  args: {
+    label: 'Webcam grid size',
+    min: 1,
+    max: 4,
+    step: 1,
+    marks: [
+      { value: 1, label: '1x1' },
+      { value: 2, label: '2x2' },
+      { value: 3, label: '3x3' },
+      { value: 4, label: '4x4' },
+    ],
+    defaultValue: 2,
+    valueLabelDisplay: 'off',
+    ariaLabel: 'Webcam grid size',
+  },
+  decorators: [
+    (StoryComponent) => (
+      <div style={{ paddingLeft: '1.5rem', paddingRight: '1.5rem' }}>
+        <StoryComponent />
+      </div>
+    ),
+  ],
+};
+
+/** Mark labels without the tick dots, reproducing the camera modal's -100/0/100 scale. */
+export const MarksWithoutTicks: Story = {
+  args: {
+    label: 'Brightness',
+    min: -100,
+    max: 100,
+    showMarkTicks: false,
+    marks: [
+      { value: -100, label: '-100' },
+      { value: 0, label: '0' },
+      { value: 100, label: '100' },
+    ],
+    defaultValue: 0,
+    ariaLabel: 'Camera brightness',
+  },
+  decorators: [
+    (StoryComponent) => (
+      <div style={{ paddingLeft: '1.5rem', paddingRight: '1.5rem' }}>
+        <StoryComponent />
+      </div>
+    ),
+  ],
+};
+
+/** Tooltip pinned open, for cases where the number must stay visible while adjusting. */
+export const ValueLabelAlwaysOn: Story = {
+  args: { label: 'Volume', defaultValue: 70, valueLabelDisplay: 'on', ariaLabel: 'Volume' },
+};
+
+/** Percentage formatting through valueLabelFormat, the volume pattern where the number matters. */
+export const PercentageFormat: Story = {
+  args: {
+    label: 'Volume',
+    defaultValue: 70,
+    valueLabelDisplay: 'on',
+    valueLabelFormat: (value: number) => `${value}%`,
+    getAriaValueText: (value: number) => `${value} percent`,
+    ariaLabel: 'Volume',
+  },
+};
+
+/** Stored value and displayed value differ: the range is 0-200 but the user sees -100 to 100. */
+export const OffsetFormat: Story = {
+  args: {
+    label: 'Brightness',
+    min: 0,
+    max: 200,
+    defaultValue: 100,
+    valueLabelDisplay: 'on',
+    valueLabelFormat: (value: number) => `${value - 100}`,
+    getAriaValueText: (value: number) => `${value - 100}`,
+    ariaLabel: 'Camera brightness',
+  },
+};
+
+/** Animation disabled: dragging the thumb and viewing the tooltip show no transitions or hover glow. */
+export const WithoutAnimation: Story = {
+  args: {
+    label: 'Volume',
+    defaultValue: 70,
+    valueLabelDisplay: 'on',
+    animate: false,
+    ariaLabel: 'Volume',
+  },
+};
+
+/** Same slider under a right-to-left ancestor: the track fills from the right. */
+export const RightToLeft: Story = {
+  args: {
+    label: 'Brightness',
+    min: -100,
+    max: 100,
+    defaultValue: 50,
+    valueLabelDisplay: 'on',
+    ariaLabel: 'Camera brightness',
+  },
+  decorators: [
+    (StoryComponent) => (
+      <div dir="rtl">
+        <StoryComponent />
+      </div>
+    ),
+  ],
+};
diff --git a/src/components/Slider/component.tsx b/src/components/Slider/component.tsx
new file mode 100644
index 0000000..6f21302
--- /dev/null
+++ b/src/components/Slider/component.tsx
@@ -0,0 +1,110 @@
+import React, { JSX, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import { SliderProps } from './types';
+import * as Styled from './styles';
+import { DEFAULT_ANIMATE, DEFAULT_SHOW_MARK_TICKS, DEFAULT_VALUE_LABEL_DISPLAY } from './constants';
+
+/**
+ * A horizontal, single-thumb slider for picking a value inside a range.
+ *
+ * It supports labels (label and helperText), decorative end icons, marks and a value tooltip,
+ * and keeps its accessible name and description on the underlying range input.
+ *
+ */
+function Slider ({
+  label,
+  helperText,
+  iconStart,
+  iconEnd,
+  showMarkTicks = DEFAULT_SHOW_MARK_TICKS,
+  animate = DEFAULT_ANIMATE,
+  valueLabelDisplay = DEFAULT_VALUE_LABEL_DISPLAY,
+  onChange,
+  onChangeCommitted,
+  id: providedId,
+  dataTest,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  slotProps,
+  ...rest
+}: SliderProps): JSX.Element {
+  const generatedUniqueId = useId();
+  const id = providedId ?? generatedUniqueId;
+  const labelId = label ? `${id}-label` : undefined;
+  const helperTextId = helperText ? `${id}-helper` : undefined;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isRtl, setIsRtl] = useState(false);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+
+    const readDirection = () => {
+      setIsRtl(window.getComputedStyle(wrapper).direction === 'rtl');
+    };
+
+    readDirection();
+    const observer = new MutationObserver(readDirection);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const outerTheme = useTheme();
+  const theme = useMemo(
+    () => (isRtl && outerTheme.direction !== 'rtl'
+      ? createTheme(outerTheme, { direction: 'rtl' })
+      : outerTheme),
+    [outerTheme, isRtl],
+  );
+
+  const handleChange = useCallback((event: Event, value: number | number[]) => {
+    onChange?.(event, Array.isArray(value) ? value[0] : value);
+  }, [onChange]);
+
+  const handleChangeCommitted = useCallback((
+    event: React.SyntheticEvent | Event,
+    value: number | number[],
+  ) => {
+    onChangeCommitted?.(event, Array.isArray(value) ? value[0] : value);
+  }, [onChangeCommitted]);
+
+  return (
+    <Styled.SliderWrapper ref={wrapperRef} $valueLabelSpace={valueLabelDisplay !== 'off'}>
+      {(label || helperText) && (
+        <Styled.TextWrapper htmlFor={id}>
+          {label && <Styled.Title id={labelId}>{label}</Styled.Title>}
+          {helperText && <Styled.HelperText id={helperTextId}>{helperText}</Styled.HelperText>}
+        </Styled.TextWrapper>
+      )}
+      <Styled.SliderRow $showMarkTicks={showMarkTicks} $animate={animate} $isRtl={isRtl}>
+        {iconStart && <Styled.IconWrapper aria-hidden>{iconStart}</Styled.IconWrapper>}
+        <ThemeProvider theme={theme}>
+          <Styled.MaterialSlider
+            {...rest}
+            valueLabelDisplay={valueLabelDisplay}
+            onChange={handleChange}
+            onChangeCommitted={handleChangeCommitted}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy || labelId}
+            data-test={dataTest}
+            slotProps={{
+              ...slotProps,
+              input: {
+                id,
+                'aria-describedby': ariaDescribedBy || helperTextId,
+                ...(dataTest ? { 'data-test': `${dataTest}-input` } : {}),
+                ...(typeof slotProps?.input === 'object' ? slotProps.input : {}),
+              },
+            }}
+          />
+        </ThemeProvider>
+        {iconEnd && <Styled.IconWrapper aria-hidden>{iconEnd}</Styled.IconWrapper>}
+      </Styled.SliderRow>
+    </Styled.SliderWrapper>
+  );
+}
+
+export default Slider;
diff --git a/src/components/Slider/constants.ts b/src/components/Slider/constants.ts
new file mode 100644
index 0000000..628d7fa
--- /dev/null
+++ b/src/components/Slider/constants.ts
@@ -0,0 +1,10 @@
+export const VALUE_LABEL_DISPLAYS = {
+  AUTO: 'auto',
+  ON: 'on',
+  OFF: 'off',
+} as const;
+
+export const VALUE_LABEL_DISPLAY_VALUES = Object.values(VALUE_LABEL_DISPLAYS);
+export const DEFAULT_VALUE_LABEL_DISPLAY = VALUE_LABEL_DISPLAYS.AUTO;
+export const DEFAULT_SHOW_MARK_TICKS = true;
+export const DEFAULT_ANIMATE = true;
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
new file mode 100644
index 0000000..58fd15e
--- /dev/null
+++ b/src/components/Slider/index.ts
@@ -0,0 +1 @@
+export { default as BBBSlider } from './component';
diff --git a/src/components/Slider/styles.ts b/src/components/Slider/styles.ts
new file mode 100644
index 0000000..edd3929
--- /dev/null
+++ b/src/components/Slider/styles.ts
@@ -0,0 +1,167 @@
+import { Slider } from '@mui/material';
+import { styled as materialStyled } from '@mui/material/styles';
+import styled from 'styled-components';
+import {
+  colorBrand1,
+  colorNeutral3,
+  colorWhite,
+  colorShadowDefault,
+  colorTextDefault,
+  colorTextLight,
+  colorIconDefault,
+  colorBorderFocusRing,
+} from '../../stylesheets/palette';
+import {
+  fontSizeXSmall,
+  fontSizeDefault,
+  fontSizeBig,
+  fontWeightDefault,
+  fontWeightLight,
+} from '../../stylesheets/typography';
+import {
+  spacingXSmall,
+  spacingSmall,
+  spacingXLarge,
+  borderRadiusSmall,
+} from '../../stylesheets/sizing';
+import { StyledSliderRowProps, StyledSliderWrapperProps } from './types';
+
+const THUMB_SIZE = '1rem';
+const TRACK_HEIGHT = '0.3125rem';
+const MARK_SIZE = '0.25rem';
+const ICON_SIZE = '1.5rem';
+
+export const SliderWrapper = styled.div<StyledSliderWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${({ $valueLabelSpace }) => $valueLabelSpace && `
+    gap: ${spacingXLarge};
+  `}
+`;
+
+export const TextWrapper = styled.label`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+`;
+
+export const Title = styled.span`
+  color: ${colorTextDefault};
+  font-size: ${fontSizeBig};
+  font-weight: ${fontWeightLight};
+`;
+
+export const HelperText = styled.span`
+  color: ${colorTextLight};
+  font-size: ${fontSizeDefault};
+  font-weight: ${fontWeightLight};
+`;
+
+export const SliderRow = styled.div<StyledSliderRowProps>`
+  display: flex;
+  align-items: center;
+  gap: ${spacingSmall};
+  width: 100%;
+
+  ${({ $showMarkTicks }) => !$showMarkTicks && `
+    & .MuiSlider-mark {
+      display: none;
+    }
+  `}
+
+  ${({ $animate }) => !$animate && `
+    & .MuiSlider-thumb,
+    & .MuiSlider-track,
+    & .MuiSlider-valueLabel {
+      transition: none;
+    }
+
+    & .MuiSlider-thumb:hover:not(.Mui-focusVisible),
+    & .MuiSlider-thumb.Mui-active:not(.Mui-focusVisible) {
+      box-shadow: 0 2px 4px 0 ${colorShadowDefault};
+    }
+  `}
+
+  ${({ $isRtl }) => $isRtl && `
+    /* MUI only mirrors right:-anchored positioning under RTL, not the LTR transforms paired
+       with it (that half normally comes from stylis-plugin-rtl, which this library can't add) */
+    && .MuiSlider-thumb {
+      transform: translate(50%, -50%);
+    }
+
+    && .MuiSlider-mark {
+      transform: translate(1px, -50%);
+    }
+
+    && .MuiSlider-markLabel {
+      transform: translateX(50%);
+    }
+  `}
+`;
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  color: ${colorIconDefault};
+  font-size: ${ICON_SIZE};
+`;
+
+export const MaterialSlider = materialStyled(Slider)({
+  color: colorBrand1,
+  height: TRACK_HEIGHT,
+  '& .MuiSlider-rail': {
+    backgroundColor: 'currentColor',
+    opacity: 0.38,
+  },
+  '& .MuiSlider-track': {
+    border: '1px solid currentColor',
+    backgroundColor: colorBrand1,
+  },
+  '& .MuiSlider-thumb': {
+    height: THUMB_SIZE,
+    width: THUMB_SIZE,
+    backgroundColor: 'currentColor',
+    boxShadow: `0 2px 4px 0 ${colorShadowDefault}`,
+    '&:hover, &.Mui-focusVisible': {
+      boxShadow: `0 0 0 0.5rem ${colorBorderFocusRing}`,
+    },
+    '&.Mui-active': {
+      boxShadow: `0 0 0 0.875rem ${colorBorderFocusRing}`,
+    },
+  },
+  '& .MuiSlider-mark': {
+    width: MARK_SIZE,
+    height: MARK_SIZE,
+    borderRadius: '50%',
+    backgroundColor: colorNeutral3,
+    '&.MuiSlider-markActive': {
+      backgroundColor: colorWhite,
+    },
+  },
+  '& .MuiSlider-markLabel': {
+    color: colorTextLight,
+    fontSize: fontSizeXSmall,
+    // RTL: resolve each label's own direction so a leading minus sign doesn't get reordered
+    unicodeBidi: 'plaintext',
+  },
+  '& .MuiSlider-valueLabel': {
+    backgroundColor: colorTextDefault,
+    color: colorWhite,
+    fontSize: fontSizeXSmall,
+    fontWeight: fontWeightDefault,
+    borderRadius: borderRadiusSmall,
+    padding: `${spacingXSmall} ${spacingSmall}`,
+    '& .MuiSlider-valueLabelLabel': {
+      // RTL: resolve each label's own direction so a leading minus sign doesn't get reordered
+      unicodeBidi: 'plaintext',
+    },
+  },
+  '&.Mui-disabled': {
+    color: colorNeutral3,
+    '& .MuiSlider-track': {
+      backgroundColor: colorNeutral3,
+    },
+  },
+});
diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts
new file mode 100644
index 0000000..6e1a6a7
--- /dev/null
+++ b/src/components/Slider/types.ts
@@ -0,0 +1,67 @@
+import React from 'react';
+import { SliderProps as MuiSliderProps } from '@mui/material';
+import { VALUE_LABEL_DISPLAY_VALUES } from './constants';
+
+export type ValueLabelDisplay = typeof VALUE_LABEL_DISPLAY_VALUES[number];
+
+export interface StyledSliderRowProps {
+  $showMarkTicks: boolean;
+  $animate: boolean;
+  $isRtl: boolean;
+}
+
+export interface StyledSliderWrapperProps {
+  $valueLabelSpace: boolean;
+}
+
+export interface SliderProps extends Omit<MuiSliderProps,
+  'orientation' | 'value' | 'defaultValue' | 'onChange' | 'onChangeCommitted' | 'valueLabelDisplay'
+> {
+  /** Main label text displayed above the slider. */
+  label?: string;
+
+  /** Helper text displayed below the label. */
+  helperText?: string;
+
+  /** Current value; providing it makes the slider controlled. */
+  value?: number;
+
+  /** Initial value used while the slider is uncontrolled. */
+  defaultValue?: number;
+
+  /** Change handler fired continuously while the user drags or presses a key. */
+  onChange?: (event: Event, value: number) => void;
+
+  /** Change handler fired once, when the interaction ends; prefer it for expensive updates. */
+  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number) => void;
+
+  /** Decorative node rendered at the minimum end of the track. */
+  iconStart?: React.ReactNode;
+
+  /** Decorative node rendered at the maximum end of the track. */
+  iconEnd?: React.ReactNode;
+
+  /** Controls when the value tooltip is shown. @default 'auto' */
+  valueLabelDisplay?: ValueLabelDisplay;
+
+  /** Renders the tick dots of `marks`; set to false to keep the mark labels only. @default true */
+  showMarkTicks?: boolean;
+
+  /** Enables transitions and hover/drag visual effects; set to false for instant state changes. @default true */
+  animate?: boolean;
+
+  /** HTML `id` applied to the underlying range input; auto-generated via `useId` when omitted. */
+  id?: string;
+
+  /** Value for the `data-test` attribute on the root; the range input gets `${dataTest}-input`. */
+  dataTest?: string;
+
+  /** Accessible name for the slider. */
+  ariaLabel?: string;
+
+  /** ID of the element that labels the slider; ignored when `ariaLabel` is set, and falls back to the rendered label's id when omitted. */
+  ariaLabelledBy?: string;
+
+  /** ID of the element that describes the slider; falls back to the rendered helper text's id when omitted. */
+  ariaDescribedBy?: string;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 230d706..6c16524 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,6 +9,7 @@ export { BBBNavigation } from './Navigation';
 export { BBBScrollArea } from './ScrollArea';
 export { BBBSearch } from './Search';
 export { BBBSelect } from './Select';
+export { BBBSlider } from './Slider';
 export { BBBSpinner } from './Spinner';
 export { BBBTextAreaInput } from './TextAreaInput';
 export { BBBTextInput } from './TextInput';
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 461ae7f..49b575f 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -13,6 +13,7 @@ export default {
     ScrollArea: './src/components/ScrollArea/index.ts',
     Search: './src/components/Search/index.ts',
     Select: './src/components/Select/index.ts',
+    Slider: './src/components/Slider/index.ts',
     Spinner: './src/components/Spinner/index.ts',
     TextAreaInput: './src/components/TextAreaInput/index.ts',
     TextInput: './src/components/TextInput/index.ts',