Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-bootstrap-range-slider

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-bootstrap-range-slider

A range slider component with tooltips for React Bootstrap that extends the HTML input (type=range) element.

  • 3.0.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

License: MIT NPM version NPM downloads Required react version Issues npm bundle size

React Bootstrap Range Slider   Tweet

A range slider with tooltips for React Bootstrap v1.0.0+ / Bootstrap 4 that extends the HTML <input type="range"> element.

Check out the Examples Page for live demos of all main slider features.

React Bootstrap Range Slider screenshot showing rendered slider component with various options applied, including tooltips and color variants

Installation

yarn add react-bootstrap-range-slider

or

npm install react-bootstrap-range-slider

Prerequisites

React Bootstrap must be installed and the Bootstrap CSS imported (or included).

Usage

In your index.js or similar:

import 'bootstrap/dist/css/bootstrap.css'; // or include from a CDN
import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';

Your component:

import React, { useState } from 'react';
import RangeSlider from 'react-bootstrap-range-slider';

const MyComponent = () => {

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

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

};

Features

  • Compatible with React Bootstrap v1.0.0+ and Bootstrap 4+;
  • Implemented using HTML5 <input type="range"> element;
  • A tooltip can be configured to automatically display on hover or be constantly visible;
  • A custom tooltip formatter function can be provided.
  • Aligns horizontally with Bootstrap form controls;
  • Bootstrap small (sm) and large (lg) sizes are supported;
  • Bootstrap button color variants such as 'primary' and 'secondary' are supported;

Options (as React props)

PropertyTypeDefaultDescription
valuenumberThe current value of the slider.
onChangefunctionA callback fired when the range slider's value changes. The callback's first argument is a React.ChangeEvent. The second argument is the slider's new value as a number.
onAfterChangefunctionA callback fired after interaction with the slider has finished if the value has changed. The callback function's signature is the same as for onChange.
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.
tooltipStyleobjectStyle to be applied to tooltip div.
tooltipPropsobjectProperties applied to the tooltip's <div> element.
inputPropsobjectProperties applied to the <input> element. DEPRECATED: additional props added to the RangeSlider component's props will be passed to the underlying <input> element.
refReact.Ref<HTMLInputElement>If 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.

Sass / Customizing Bootstrap

If you have set custom theme colors using $theme-colors as described in the React Bootstrap documentation and would like them to apply to the range slider, include the React Bootstrap Range Slider's Sass/SCSS like so:

/* The following block can be included in a custom.scss */

/* make the customizations */
$theme-colors: (
    "info": tomato,
    "danger": teal
);

@import "react-bootstrap-range-slider/dist/react-bootstrap-range-slider.scss";

/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";

Browser Compatibility

React Bootstrap Range Slider works in most modern web browsers and in Internet Explorer 10+ (with polyfills required for React to work).

BrowserSupported
ChromeYes
EdgeYes
FirefoxYes
Internet Explorer10, 11
OperaYes
SafariYes
Samsung InternetYes
UCYes
YandexYes

License

Copyright (c) 2020 Jason Wilson

MIT License

Keywords

FAQs

Package last updated on 24 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc