
```jsx
import { CFormRange } from '@coreui/react'
// or
import CFormRange from '@coreui/react/src/components/form/CFormRange'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cformrange-class-name">
        <td className="text-primary fw-semibold">className<a href="#cformrange-class-name" aria-label="CFormRange className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the component.</p>
        </td>
      </tr>
      <tr id="cformrange-disabled">
        <td className="text-primary fw-semibold">disabled<a href="#cformrange-disabled" aria-label="CFormRange disabled permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the disabled state for the component.</p>
        </td>
      </tr>
      <tr id="cformrange-label">
        <td className="text-primary fw-semibold">label<a href="#cformrange-label" aria-label="CFormRange label permalink" className="anchor-link after">#</a><span className="badge bg-success">4.2.0+</span></td>
        <td>-</td>
        <td><code>{`ReactNode`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Add a caption for a component.</p>
        </td>
      </tr>
      <tr id="cformrange-max">
        <td className="text-primary fw-semibold">max<a href="#cformrange-max" aria-label="CFormRange max permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Specifies the maximum value for the component.</p>
        </td>
      </tr>
      <tr id="cformrange-min">
        <td className="text-primary fw-semibold">min<a href="#cformrange-min" aria-label="CFormRange min permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Specifies the minimum value for the component.</p>
        </td>
      </tr>
      <tr id="cformrange-on-change">
        <td className="text-primary fw-semibold">onChange<a href="#cformrange-on-change" aria-label="CFormRange onChange permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ChangeEventHandler<HTMLInputElement>`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Method called immediately after the <code>{`value`}</code> prop changes.</p>
        </td>
      </tr>
      <tr id="cformrange-read-only">
        <td className="text-primary fw-semibold">readOnly<a href="#cformrange-read-only" aria-label="CFormRange readOnly permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the readonly state for the component.</p>
        </td>
      </tr>
      <tr id="cformrange-step">
        <td className="text-primary fw-semibold">step<a href="#cformrange-step" aria-label="CFormRange step permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Specifies the interval between legal numbers in the component.</p>
        </td>
      </tr>
      <tr id="cformrange-value">
        <td className="text-primary fw-semibold">value<a href="#cformrange-value" aria-label="CFormRange value permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`number`}</code>, <code>{`string[]`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The <code>{`value`}</code> attribute of component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
