slider

A range slider component for React Bootstrap

Feb 05, 2020
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)

PropertyTypeDefaultDescription
valuenumberRequired. The current value of the slider.
onChangefunctionRequired. A callback fired when the value prop changes.
minnumber0The minimum value of the slider.
maxnumber100The maximum value of the slider.
stepnumber1The granularity with which the slider can step through values.
disabledbooleanfalseDisables the slider.
size'sm' | 'lg'Input size variants, for compatibility with other Bootstrap form components.
variantstring'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.
tooltipLabelfunctionA function that returns the tooltip's content (either a string or element). The function's first argument is the current slider value.
inputPropsobjectProperties applied to the <input> element.
refReactRefIf provided, ref will be forwarded to the underlying <input> element.
bsPrefixstring'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

Recommended