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.

React Bootstrap Range Slider screenshot showing rendered slider component with various options applied, including tooltips and color variants

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;