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)

GitHub