Range

Examples

Basic

<ods-range></ods-range>

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange></OdsRange>
  )
}

export default Example;

Labels

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

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

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange label="Volume" min={0} max={100}></OdsRange>
  )
}

export default Example;

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.

<ods-range label="Device Volume" help-text="Controls the number of the volume of the device."></ods-range>

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange label="Device Volumn" help-text="Controls the volume of the device."></OdsRange>
  )
}

export default Example;

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.

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

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange min={0} max={10} step={1}></OdsRange>
  )
}

export default Example;

Disabled

Use the disabled attribute to disable a slider.

<ods-range disabled></ods-range>

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange disabled></OdsRange>
  )
}

export default Example;

Tooltip Placement

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

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

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange tooltip="bottom"></OdsRange>
  )
}

export default Example;

Disable the Tooltip

To disable the tooltip, set tooltip to none.

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

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange tooltip="none"></OdsRange>
  )
}

export default Example;

Custom Track Offset

You can customize the initial offset of the active track using the —track-active-offset custom property.

<ods-range min="-100" max="100" class="example"></ods-range>

<style>
  .example {
    --track-active-offset: 50%;
  }
</style>

import { OdsRange } from '@ods/components/react.range';

const css = `
  .example {
    --track-active-offset: 50%;
  }
`;

const Example = () => {
  return (
    <>
      <OdsRange min={-100} max={100} className="example"></OdsRange>
      <style>{css}</style>
    </>
  )
}

export default Example;

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.

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

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

import { OdsRange } from '@ods/components/react.range';

const Example = () => {
  return (
    <OdsRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`}></OdsRange>
  )
}

export default Example;

Importing

import '@ods/components/web.range';

import { OdsRange } from '@ods/components/react.range';

import { OdsRange } from '@ods/components/react.range';