RangeInput

A styled wrapper around the HTML <input type="range"> element with support for labels, icons, and customization options.

Props

Prop	Type	Default	Description
value	number	Required	Current slider value
onValueChange	(value: number) => void	Required	Called when the value changes
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
label	ReactNode	-	Label text displayed alongside the slider
labelPosition	"start" \| "end"	"end"	Position of the label
labelSize	Size	-	Label text size
labelColor	TextColor	-	Label text color
labelBold	boolean	-	Whether the label is bold
addOn	JSX.Element	-	Icon or element to display
addOnPosition	"start" \| "end"	"start"	Position of the add-on
gap	Gap	"medium"	Space between elements
padding	Padding	"none"	Container padding
disabled	boolean	-	Disables the input

Basic usage

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

<RangeInput value={value} onValueChange={setValue} />;

With label

Labels can be positioned at the start or end of the slider:

75%

25%

// Label at end (default)
<RangeInput value={value} onValueChange={setValue} label={`${value}%`} />

// Label at start
<RangeInput
  value={value}
  onValueChange={setValue}
  label={`${value}%`}
  labelPosition="start"
/>

With icon add-on

Add icons to provide context for what the slider controls:

50%

Brightness

// Icon at start (default)
<RangeInput
  addOn={<Icon icon="volume-2" color="primary" size="medium" />}
  value={volume}
  onValueChange={setVolume}
  label={`${volume}%`}
/>

// Icon at end
<RangeInput
  addOn={<Icon icon="sun" color="warning" size="medium" />}
  addOnPosition="end"
  value={brightness}
  onValueChange={setBrightness}
  label="Brightness"
  labelPosition="start"
/>

Label styling

Customize the label appearance:

75%

90%

MAX

<RangeInput
  value={value}
  onValueChange={setValue}
  label={`${value}%`}
  labelSize="large"
  labelColor="highlight"
  labelBold
/>

Custom range

Set min, max, and step values:

// Temperature slider (0-100 in steps of 5)
<RangeInput
  value={temperature}
  onValueChange={setTemperature}
  min={0}
  max={100}
  step={5}
  label={`${temperature}°C`}
/>

// Decimal values (0-1 in steps of 0.1)
<RangeInput
  value={opacity}
  onValueChange={setOpacity}
  min={0}
  max={1}
  step={0.1}
  label={opacity.toFixed(1)}
/>

Volume control example

65%

function VolumeControl() {
  const [volume, setVolume] = useState(50);

  const icon =
    volume === 0 ? "volume-off" : volume < 50 ? "volume-1" : "volume-2";

  return (
    <RangeInput
      addOn={<Icon icon={icon} color="primary" size="medium" />}
      value={volume}
      onValueChange={setVolume}
      label={`${volume}%`}
      labelBold
    />
  );
}

Accessibility

The underlying <input type="range"> is fully accessible
Labels are properly associated with the input via htmlFor
Focus states are visually indicated
Use aria-label or visible labels to describe the slider's purpose

<RangeInput aria-label="Volume" value={volume} onValueChange={setVolume} />