A range slider component with tooltips for React Bootstrap that extends the HTML input (type=range) element.
npm install react-bootstrap-range-slider     
A range slider with tooltips for React Bootstrap v1.0.0+ / Bootstrap 4 that extends the HTML element.
Check out the Examples Page for live demos of all main slider features.
yarn add react-bootstrap-range-slider
or
npm install react-bootstrap-range-slider
React Bootstrap must be installed and the Bootstrap CSS imported (or included).
In your index.js or similar:
``JavaScript`
import 'bootstrap/dist/css/bootstrap.css'; // or include from a CDN
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
Your component:
`JavaScript
import React, { useState } from 'react';
import RangeSlider from 'react-bootstrap-range-slider';
const MyComponent = () => {
const [ value, setValue ] = useState(0);
return (
onChange={changeEvent => setValue(changeEvent.target.value)}
/>
);
};
`
- Compatible with React Bootstrap v1.0.0+ and Bootstrap 4+;
- Implemented using HTML5 element;sm
- A tooltip can be configured to automatically display on hover or be constantly visible;
- A custom tooltip formatter function can be provided.
- Aligns horizontally with Bootstrap form controls;
- Bootstrap small () and large (lg) sizes are supported;
- Bootstrap button color variants such as 'primary' and 'secondary' are supported;
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| value | number | | The current value of the slider. |onChange
| | function | | A callback fired when the range slider's value changes. The callback's first argument is a React.ChangeEvent. The second argument is the slider's new value as a number. |onAfterChange
| | function | | A callback fired after interaction with the slider has finished if the value has changed. The callback function's signature is the same as for onChange. |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
element. |
| inputProps | object | | Properties applied to the element. DEPRECATED: additional props added to the RangeSlider component's props will be passed to the underlying element. |
| ref | React.Ref | | If provided, ref will be forwarded to the underlying 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. |Sass / Customizing Bootstrap
If you have set custom theme colors using
$theme-colors as described in the React Bootstrap documentation and would like them to apply to the range slider, include the React Bootstrap Range Slider's Sass/SCSS like so:`css
/ The following block can be included in a custom.scss // make the customizations /
$theme-colors: (
"info": tomato,
"danger": teal
);
@import "react-bootstrap-range-slider/dist/react-bootstrap-range-slider.scss";
/ import bootstrap to set changes /
@import "~bootstrap/scss/bootstrap";
``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