How to Create a Reusable Range Slider in React

A native HTML <input type="range"> is a good starting point for a single-value slider in React. Put its value in the parent component and pass the value, bounds, and change handler to a reusable RangeSlider. For two independently selected values, multi-range-slider-react is an external package; its release-specific API must be checked before writing a working integration.

Use HTML <input> to Create a Custom RangeSlider React Component

Keep the current value in the parent so it can be displayed or used elsewhere in the app. The parent passes value, min, max, and onChange as direct props. The child uses those same props on the native input, and converts the input’s string value to a number before updating state.

The following browser markup is a static illustration of the native control. It is not a React component and has no runtime output by itself:

<label for="volume">Volume: <output id="volume-value">40</output></label>
<input id="volume" type="range" min="0" max="100" value="40">

In a React app, put the parent and reusable component in separate files. These complete one-line files use JSX, as supported by a standard React app build. In App.js, import useState, initialize the parent value, and pass matching bounds, value, and handler props to the child:

App.js: import { useState } from 'react'; import RangeSlider from './rangeSlider'; export default function App() { const [value, setValue] = useState(40); return <main><p>Volume: {value}</p><RangeSlider min={0} max={100} value={value} onChange={(event) => setValue(Number(event.currentTarget.value))} /></main>; }

In rangeSlider.js, accept those direct props and export the component as the default export used by App.js:

rangeSlider.js: export default function RangeSlider({ min, max, value, onChange }) { return <input type="range" min={min} max={max} value={value} onChange={onChange} aria-label="Volume" />; }

Here App owns the value, while RangeSlider renders the control from its props. When the user moves the thumb, onChange reads the new value from event.currentTarget.value, converts it to a number, and calls setValue. React then renders the updated number and passes it back to the input. Keep the input’s accessible name relevant to the value it controls.

The event-to-state conversion uses ordinary JavaScript and can be illustrated independently of React:

const currentValue = 40;
const event = { currentTarget: { value: '57' } };
const nextValue = Number(event.currentTarget.value);
const displayedValue = nextValue;
console.log(`Value: ${displayedValue}`);

Value: 57

The executable snippet demonstrates the numeric conversion and display value only; the React components above show how the same value is connected to component state. The runtime evidence for this article covers this JavaScript conversion, not React or JSX execution.

Use the multi-range-slider-react Library to Create Multi-Range Slider in React

A native range input represents one current value. multi-range-slider-react is an external package, not a built-in React library; its npm package page lists package releases. The supplied material does not identify a pinned release or include that release’s documentation or source, so it cannot substantiate the component props or event payload needed for a working example. Do not copy guessed prop names or event fields into an integration. Before implementing this package, choose a release, check its documentation or source for how the lower and upper values are passed and returned, and pin that verified version in your application.

This article cannot yet demonstrate a working MultiRangeSlider integration, display selected lower and upper values, or show parent state updates from a package event. Those details depend on the chosen release’s documented API. The runnable JavaScript illustration above covers only numeric conversion for the native, single-value RangeSlider; it does not execute React or this package.

Use the native RangeSlider when you need one parent-controlled value and want to own the small component yourself. A package-based two-value implementation needs verified release-specific API details before its props and state update path can be shown accurately. These are separate approaches; the native component is not used by the package.