Range

A range lets users choose an approximate value on a slider.

#Default

The default form of a range.

Adjust volume

import { Label, Range } from '@wolf-rayet/react';

<div>
  <Label htmlFor="volume">Adjust volume</Label>
  <Range id="volume" min={1} max={100} defaultValue={50} />
</div>

#Steps

Use steps when only certain values are valid.

Priority

import { Label, Range } from '@wolf-rayet/react';

<div>
  <Label htmlFor="priority">Priority</Label>
  <Range id="priority" min={1} max={5} step={1} defaultValue={3} />
</div>

#Disabled

Use a disabled range when the value cannot be changed.

Locked value

import { Label, Range } from '@wolf-rayet/react';

<div>
  <Label htmlFor="locked">Locked value</Label>
  <Range id="locked" min={1} max={100} defaultValue={25} isDisabled />
</div>