A range slider component for React Bootstrap

React Bootstrap Range Slider

A range slider component for React Bootstrap (Bootstrap 4) that extends the native HTML <input type="range"> element.

Installation

npm install react-bootstrap-range-slider

Prerequisites

React Bootstrap and Bootstrap must be installed and the CSS from Bootstrap imported.

Usage

import React, { useState } from 'react';
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
import RangeSlider from 'react-bootstrap-range-slider';

const MyComponent = () => {

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

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

};

Options (as React props)

Property	Type	Default	Description
value	number		Required. The current value of the slider.
onChange	function		Required. A callback fired when the value prop changes.
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.
inputProps	object		Properties applied to the <input> element.
ref	ReactRef		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.

GitHub