React Bootstrap Range Slider

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'
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'
tooltipPlacement	'top'	'bottom'	'bottom'
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.

Download Details:

Author: jaywilz

Official Website: https://github.com/jaywilz/react-bootstrap-range-slider

#reactjs #javascript #Bootstrap