The Range component is the primary interface for creating range sliders. It uses a render-prop pattern where you provide functions to render the track, thumbs, and optionally marks. The component manages the slider state, accessibility, and interaction logic (mouse, touch, and keyboard).
To use it, you must provide:
values: An array of numbers representing the current slider positions.onChange: A callback function that receives the updated values array.renderTrack: A function that renders the slider track. It receives props (which must be spread onto the track element), isDragged status, and disabled status.renderThumb: A function that renders each thumb. It receives the thumb's index, current value, isDragged status, and props (which must be spread onto the thumb element).
Important: You must spread the props provided by renderTrack and renderThumb onto your elements to ensure accessibility (ARIA attributes) and event handling work correctly.
import React from 'react';
import Range from 'react-range';
const MySlider = () => {
return (
<Range
values={[50]}
min={0}
max={100}
step={1}
onChange={(values) => console.log(values)}
renderTrack={({ props, isDragged, disabled }) => (
<div {...props} style={{ ...props.style, height: '10px', background: 'blue' }}>
{/* Track content */}
</div>
)}
renderThumb={({ props, isDragged }) => (
<div
{...props}
style={{ ...props.style, backgroundColor: 'white', height: '20px', width: '20px', borderRadius: '50%' }}
/>
)}
/>
);
};
