RangeField

Description

A range slider input field component that allows users to select a numeric value by dragging a slider. Integrates with React Hook Form and displays the current value and min/max labels.

Import

import { RangeField } from '@components/common/form/RangeField';

Usage

import { Form } from '@components/common/form/Form';
import { RangeField } from '@components/common/form/RangeField';

function SettingsForm() {
  return (
    <Form action="/api/settings">
      <RangeField
        name="volume"
        label="Volume"
        min={0}
        max={100}
        defaultValue={50}
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	FieldPath<T>	-	Field name (required)
label	string	-	Label text displayed above the slider
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Increment/decrement step
showValue	boolean	true	Show current value in label
defaultValue	number	-	Default slider value
required	boolean	false	Makes the field required
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions<T>	-	React Hook Form validation rules
wrapperClassName	string	-	CSS class for the wrapper div
...props	InputHTMLAttributes	-	All standard HTML input attributes

Example: Volume Control

import { Form } from '@components/common/form/Form';
import { RangeField } from '@components/common/form/RangeField';

function AudioSettings() {
  return (
    <Form action="/api/audio">
      <RangeField
        name="volume"
        label="Volume"
        min={0}
        max={100}
        step={5}
        defaultValue={75}
        showValue
      />
      
      <RangeField
        name="balance"
        label="Balance"
        min={-100}
        max={100}
        step={10}
        defaultValue={0}
      />
    </Form>
  );
}

Example: Price Filter

import { Form } from '@components/common/form/Form';
import { RangeField } from '@components/common/form/RangeField';

function FilterForm() {
  return (
    <Form action="/api/filter">
      <RangeField
        name="maxPrice"
        label="Maximum Price"
        min={0}
        max={1000}
        step={50}
        defaultValue={500}
        showValue
        helperText="Drag to set maximum price"
      />
    </Form>
  );
}

Example: Rating Selector

import { Form } from '@components/common/form/Form';
import { RangeField } from '@components/common/form/RangeField';

function RatingForm() {
  return (
    <Form action="/api/ratings">
      <RangeField
        name="rating"
        label="Rating"
        min={1}
        max={5}
        step={0.5}
        defaultValue={3}
        showValue
      />
    </Form>
  );
}

Features

• Live Value Display: Shows current value in the label as you drag
• Min/Max Labels: Displays minimum and maximum values below the slider
• Auto Number Conversion: Automatically converts value to number
• Flexible Stepping: Control precision with step value
• TypeScript Support: Full type safety with generics

Value Display

When showValue is true, the current value is displayed in parentheses next to the label:

Volume (75)

Related Components

• Form - Parent form component
• NumberField - Numeric text input