Range Slider

Range Slider With Tooltip

50

Show codeHide code

import { RangeSlider } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function RangeSliderWithTooltip() {
  const [value, setValue] = useState(50);

  return (
    <div className="my-24">
      <RangeSlider
        tooltip
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
      />
    </div>
  );
}

Range Slider With Label

Yearly mileage

20,000 mi

Show codeHide code

import { RangeSlider } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function RangeSliderWithLabel() {
  const [value, setValue] = useState(20000);

  return (
    <div className="stack-8">
      <label htmlFor="mileage-range">Yearly mileage</label>
      <p>
        <output className="font-20 font-medium" htmlFor="mileage-range">
          {value.toLocaleString('en-GB')}
          <span className="micro font-medium"> mi</span>
        </output>
      </p>
      <RangeSlider
        className="mt-32"
        id="mileage-range"
        value={value}
        min={10000}
        max={30000}
        onChange={(e) => setValue(Number(e.target.value))}
      />
    </div>
  );
}

Double Range Slider With Tooltip

25

75

Show codeHide code

import { DoubleRangeSlider } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function DoubleRangeSliderWithTooltip() {
  const [value, setValue] = useState<[number, number]>([25, 75]);

  return (
    <div className="my-24">
      <DoubleRangeSlider
        tooltip
        value={value}
        onValueChange={setValue}
        minLabel="Minimum value"
        maxLabel="Maximum value"
        aria-label="Range with tooltip"
      />
    </div>
  );
}

Double Range Slider With Label

Yearly mileage

10,000–25,000 mi

Show codeHide code

import { DoubleRangeSlider } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function DoubleRangeSliderWithLabel() {
  const [value, setValue] = useState<[number, number]>([10000, 25000]);

  return (
    <div className="stack-8">
      <label id="mileage-label" htmlFor="mileage-range-min">
        Yearly mileage
      </label>
      <p>
        <output
          className="font-20 font-medium"
          htmlFor="mileage-range-min mileage-range-max"
        >
          {value[0].toLocaleString('en-GB')}–{value[1].toLocaleString('en-GB')}
          <span className="micro font-medium"> mi</span>
        </output>
      </p>
      <DoubleRangeSlider
        className="mt-32"
        id="mileage-range"
        aria-labelledby="mileage-label"
        min={5000}
        max={30000}
        step={500}
        minLabel="Minimum mileage"
        maxLabel="Maximum mileage"
        value={value}
        onValueChange={setValue}
      />
    </div>
  );
}