React Bootstrap Range Component
Range with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to create customizable and consistent cross-browser range sliders using CoreUI’s React components styled with Bootstrap.
How to use React Bootstrap Range component#
Use CoreUI’s <CFormRange> component to create custom range inputs with Bootstrap styling. It provides consistent appearance and behavior across modern browsers and supports customization via standard props.
Basic example#
The <CFormRange> component renders a stylized <input type="range"> element.
Disabled state#
Add the disabled prop to visually gray out the slider and disable interaction.
Minimum and maximum values#
Customize the slider’s value range using the min and max props.
Custom step values#
Set a custom step size to control the interval between selectable values.
API reference#
Refer to the API documentation below for detailed descriptions of all available props.