React

Import the Slider component from @tmedxp/react-components. For cases where you don’t need the built-in labels, use BasicSlider instead.

Properties

Single thumb

Prop	Type	Description	Required
`bottomLabels`	`[string, string, string]`	Three scale labels displayed below the track.	✅
`defaultValue`	`number`	Initial value of the slider.
`value`	`number`	Controlled value of the slider.
`min`	`number`	Minimum value.
`max`	`number`	Maximum value.
`step`	`number`	Step increment.
`steps`	`number[]`	Discrete snap values (alternative to `step`).
`disabled`	`boolean`	Disables the slider.
`theme`	`'default' \| 'ev' \| 'temperature'`	Visual theme variant.
`ariaLabel`	`string`	Accessible label for the thumb.
`ariaLabelledby`	`string`	ID of the element labelling the slider.
`showProgress`	`boolean`	Show the progress fill on the track.
`formatValueText`	`(value: number) => string`	Formats `aria-valuetext` for assistive technologies.
`onChange`	`(value: number) => void`	Callback when the value changes.

Multi thumb (range)

Prop	Type	Description	Required
`ariaLabels`	`[string, string]`	Accessible labels for each thumb.	✅
`topLabels`	`[string, string, string]`	Three scale labels displayed above the track.	✅
`defaultValue`	`[number, number]`	Initial values for both thumbs.
`value`	`[number, number]`	Controlled values for both thumbs.
`min`	`number`	Minimum value.
`max`	`number`	Maximum value.
`step`	`number`	Step increment.
`steps`	`number[]`	Discrete snap values (alternative to `step`).
`disabled`	`boolean`	Disables the slider.
`theme`	`'default' \| 'ev' \| 'temperature'`	Visual theme variant.
`topIcons`	`[SliderIcon?, SliderIcon?, SliderIcon?]`	Icons displayed alongside top labels.
`showProgress`	`boolean`	Show the progress fill on the track.
`formatValueText`	`(value: number) => string`	Formats `aria-valuetext` for assistive technologies.
`onChange`	`(value: [number, number]) => void`	Callback when either value changes.

Examples

Single thumb

import { Slider } from '@tmedxp/react-components';

const SliderExample = () => {
  return (
    <Slider
      defaultValue={50}
      ariaLabel="Percentage"
      formatValueText={(value) => `${value}%`}
      bottomLabels={['0%', '50%', '100%']}
    />
  );
};

With progress

import { Slider } from '@tmedxp/react-components';

const ProgressSlider = () => {
  return (
    <Slider
      defaultValue={60}
      showProgress
      ariaLabel="Percentage"
      formatValueText={(value) => `${value}%`}
      bottomLabels={['0%', '50%', '100%']}
    />
  );
};

EV theme

import { Slider } from '@tmedxp/react-components';

const EvSlider = () => {
  return (
    <Slider
      defaultValue={80}
      theme="ev"
      ariaLabel="Battery charge level"
      formatValueText={(value) => `${value}%`}
      bottomLabels={['0%', '50%', '100%']}
    />
  );
};

Temperature theme

import { Slider } from '@tmedxp/react-components';

const TemperatureSlider = () => {
  return (
    <Slider
      defaultValue={18}
      min={-20}
      max={30}
      theme="temperature"
      ariaLabel="Temperature"
      formatValueText={(value) => `${value}°C`}
      bottomLabels={['-20°C', '5°C', '30°C']}
    />
  );
};

With discrete steps

import { Slider } from '@tmedxp/react-components';

const SteppedSlider = () => {
  return (
    <Slider
      defaultValue={50}
      steps={[0, 25, 50, 75, 100]}
      ariaLabel="Quality"
      formatValueText={(value) => `${value}%`}
      bottomLabels={['Low', 'Mid', 'High']}
    />
  );
};

Disabled

import { Slider } from '@tmedxp/react-components';

const DisabledSlider = () => {
  return (
    <Slider
      defaultValue={40}
      disabled
      ariaLabel="Percentage"
      formatValueText={(value) => `${value}%`}
      bottomLabels={['0%', '50%', '100%']}
    />
  );
};

Multi thumb (range)

import { Slider } from '@tmedxp/react-components';

const RangeSliderExample = () => {
  return (
    <Slider
      defaultValue={[25, 75]}
      ariaLabels={['Minimum', 'Maximum']}
      topLabels={['Low', 'Mid', 'High']}
    />
  );
};

Multi thumb with icons

import { Slider } from '@tmedxp/react-components';

const RangeSliderWithIcons = () => {
  return (
    <Slider
      defaultValue={[25, 75]}
      ariaLabels={['Minimum', 'Maximum']}
      topLabels={['Low', 'Mid', 'High']}
      topIcons={['highway', 'tree', 'check']}
    />
  );
};

Multi thumb temperature

import { Slider } from '@tmedxp/react-components';

const TemperatureRangeSlider = () => {
  return (
    <Slider
      defaultValue={[-5, 20]}
      min={-20}
      max={30}
      theme="temperature"
      ariaLabels={['Minimum temperature', 'Maximum temperature']}
      formatValueText={(value) => `${value}°C`}
      topLabels={['Cold', 'Mild', 'Hot']}
    />
  );
};

Controlled value

import { useState } from 'react';
import { Slider } from '@tmedxp/react-components';

const ControlledSlider = () => {
  const [value, setValue] = useState(50);

  return (
    <>
      <Slider
        value={value}
        onChange={setValue}
        ariaLabel="Volume"
        formatValueText={(v) => `${v}%`}
        bottomLabels={['Mute', '50%', 'Max']}
      />
      <p>Current value: {value}%</p>
    </>
  );
};