A range slider with tooltips for React Bootstrap v1.0.0+ / Bootstrap 4 that extends the HTML <input type="range"> 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

Prerequisites

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

Usage

In your index.js or similar:

import 'bootstrap/dist/css/bootstrap.css'; // or include from a CDN
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';

Your component:

import React, { useState } from 'react';
import RangeSlider from 'react-bootstrap-range-slider';

const MyComponent = () => {

  const [ value, setValue ] = useState(0); 

  return (
    <RangeSlider
      value={value}
      onChange={changeEvent => setValue(changeEvent.target.value)}
    />
  );

};

Features

• Compatible with React Bootstrap v1.0.0+ and Bootstrap 4+;
• Implemented using HTML5 <input type="range"> 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;