A slider component for React Bootstrap v1.0.0-beta / Bootstrap 4 that extends the native HTML <input type="range">
element.
Check out the Examples Page for live demos of all main slider features.
npm install react-bootstrap-range-slider
React Bootstrap and Bootstrap must be installed and the CSS from Bootstrap imported.
import React, { useState } from 'react';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import RangeSlider from 'react-bootstrap-range-slider';
const MyComponent = () => {
const [ value, setValue ] = useState(0);
return (
<RangeSlider
value={value}
onChange={changeEvent => setValue(changeEvent.target.value)}
/>
);
};
- Compatible with React Bootstrap v1.0.0-beta and Bootstrap 4;
- Implemented using native HTML
<input type="range">
element; - Aligns horizontally with Bootstrap form controls;
- Bootstrap small (
sm
) and large (lg
) sizes are supported; - Bootstrap button color variants such as 'primary' and 'secondary' are supported;
- A tooltip can be configured to automatically display on hover or be constantly visible;
- A custom tooltip formatter function can be provided.
Property | Type | Default | Description |
---|---|---|---|
value |
number |
Required. The current value of the slider. | |
onChange |
function |
Required. A callback fired when the value prop changes. | |
min |
number |
0 |
The minimum value of the slider. |
max |
number |
100 |
The maximum value of the slider. |
step |
number |
1 |
The granularity with which the slider can step through values. |
disabled |
boolean |
false |
Disables the slider. |
size |
'sm' | 'lg' |
Input size variants, for compatibility with other Bootstrap form components. | |
variant |
string |
'primary' |
Color variant, equivalent to the Bootstrap Button color variant. One of: 'primary' , 'secondary' , 'success' , 'danger' , 'warning' , 'info' , 'dark' , 'light' |
tooltip |
'auto' | 'on' | 'off' |
'auto' |
If 'auto' the tooltip will be visible only when hovered. If 'on' the tooltip will always be visible. If 'off' no tooltip will be displayed. |
tooltipPlacement |
'top' | 'bottom' |
'bottom' |
Placement of tooltip relative to slider thumb. |
tooltipLabel |
function |
A function that returns the tooltip's content (either a string or element). The function's first argument is the current slider value. | |
tooltipStyle |
object |
Style to be applied to tooltip div. | |
tooltipProps |
object |
Properties applied to the tooltip's <div> element. |
|
inputProps |
object |
Properties applied to the <input> element. |
|
ref |
ReactRef |
If provided, ref will be forwarded to the underlying <input> element. |
|
bsPrefix |
string |
'range-slider' |
Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. |
React Bootstrap Range Slider works in most modern web browsers and in Internet Explorer 10+ (with polyfills required for React to work).
Browser | Supported |
---|---|
Chrome | Yes |
Edge | Yes |
Firefox | Yes |
Internet Explorer | 10, 11 |
Opera | Yes |
Safari | Yes |
Samsung Internet | Yes |
UC | Yes |
Yandex | Yes |
Copyright (c) 2020 Jason Wilson