Default Gray Amethyst

Range

<mo-range> | MORange
Since 1.0 stable

Range inputs allow users to select a value from a range of values.

<mo-range></mo-range>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange />;

Examples

Min, max, and step

Use the min and max attributes to set the range’s minimum and maximum values, respectively. The step attribute determines the value’s interval when increasing and decreasing. 

<mo-range min="0" max="10" step="1"></mo-range>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange min={0} max={10} step={1} />;

Disabled

Use the disabled attribute to disable a slider.

<mo-range disabled></mo-range>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange disabled />;

Tooltip placement

By default, the tooltip is shown on top. Set tooltip to bottom to show it below the slider. 

<mo-range tooltip="bottom"></mo-range>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange tooltip="bottom" />;

Disable the tooltip

To disable the tooltip, set tooltip to none.

<mo-range tooltip="none"></mo-range>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange tooltip="none" />;

Custom track colors

You can customize the active and inactive portions of the track using the --track-color-active and --track-color-inactive custom properties. 

<mo-range
  style="
  --track-color-active: var(--mo-color-highlight-6-darker);
  --track-color-inactive: var(--mo-color-highlight-6-lighter);
"
></mo-range>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MORange
    style={{
      '--track-color-active': 'var(--mo-color-highlight-6-darker)',
      '--track-color-inactive': 'var(--mo-color-highlight-6-lighter)'
    }}
  />
);

Custom tooltip formatter

You can change the tooltip’s content by setting the tooltipFormatter property to a function that accepts the range’s value as an argument. 

<mo-range min="0" max="100" step="1" class="range-with-custom-formatter"></mo-range>

<script>
  const range = document.querySelector('.range-with-custom-formatter');
  range.tooltipFormatter = value => `Total - ${value}%`;
</script>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;

Labels

Use the label attribute to give the range an accessible label. For labels that contain HTML, use the label slot instead. 

<mo-range label="Volume" min="0" max="100"></mo-input>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange label="Volume" min={0} max={100} />;

Help text

Add descriptive help text to a range with the help-text attribute. For help texts that contain HTML, use the help-text slot instead. 

<mo-range
  label="Volume"
  help-text="Controls the volume of the current song."
  min="0"
  max="100"
></mo-input>

import { MORange } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MORange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/range/range.js';

To import this component as a React component:

import MORange from '@metsooutotec/modes-web-components/dist/react/range/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/range/range.js"></script>

Slots

Name Description
label The input’s label. Alternatively, you can use the label prop.
help-text Help text that describes how to use the input. Alternatively, you can use the help-text prop.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name The input’s name attribute. string ''
value The input’s value attribute. number 0
label The range’s label. Alternatively, you can use the label slot. string ''
helpText
help-text 		The range’s help text. Alternatively, you can use the help-text slot. string ''
disabled Disables the input. boolean false
invalid This will be true when the control is in an invalid state. Validity in range inputs is determined by the message provided by the setCustomValidity method. boolean false
required Makes the range a required field. boolean false
min The input’s min attribute. number 0
max The input’s max attribute. number 100
step The input’s step attribute. number 1
tooltip The preferred placement of the tooltip. 'top' | 'bottom' | 'none' 'top'
tooltipFormatter A function used to format the tooltip’s value. (value: number) => string -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-change onMoChange Emitted when the control’s value changes. -
mo-blur onMoBlur Emitted when the control loses focus. -
mo-focus onMoFocus Emitted when the control gains focus. -

Learn more about events.

Methods

Name Description Arguments
focus() Sets focus on the input. options: FocusOptions
blur() Removes focus from the input. -
setCustomValidity() Sets a custom validation message. If message is not empty, the field will be considered invalid. message: string

Learn more about methods.

Custom Properties

Name Description Default
--thumb-size The size of the thumb.
--tooltip-offset The vertical distance the tooltip is offset from the track.
--track-color-active The color of the portion of the track that represents the current value.
--track-color-inactive The of the portion of the track that represents the remaining value.
--track-height The height of the track.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s internal wrapper.
input The native range input.
tooltip The range tooltip.
label__base The range label.

Learn more about customizing CSS parts.