A range slider component for React Bootstrap Sample in 2020

A range slider component for React Bootstrap Sample in 2020

tutorials -

React Bootstrap Range Slider

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


npm install react-bootstrap-range-slider


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


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 (
      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.


Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff