React Bootstrap Range Slider  

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;

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 <div> element. | | inputProps | object | | Properties applied to the <input> element. DEPRECATED: additional props added to the RangeSlider component's props will be passed to the underlying <input> element. | | ref | React.Ref<HTMLInputElement> | | 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. |

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:

/* 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";

Browser Compatibility

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 |

License

Copyright (c) 2020 Jason Wilson

MIT License