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.

Installation

yarn add react-bootstrap-range-slider

or

npm install react-bootstrap-range-slider

$3

React Bootstrap must be installed and the Bootstrap CSS imported (or included).

Usage

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 (
value={value}
onChange={changeEvent => setValue(changeEvent.target.value)}
/>
);

};
`

Features

- Compatible with React Bootstrap v1.0.0+ and Bootstrap 4+;
- Implemented using HTML5 element;
- 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 (sm) and large (lg) sizes are supported;
- Bootstrap button color variants such as 'primary' and 'secondary' are supported;

Options (as React props)

| 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