Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-bootstrap-range-slider
Advanced tools
A range slider component with tooltips for React Bootstrap that extends the HTML input (type=range) element.
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.
yarn add react-bootstrap-range-slider
or
npm install react-bootstrap-range-slider
React Bootstrap must be installed and the Bootstrap CSS imported (or included).
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)}
/>
);
};
<input type="range">
element;sm
) and large (lg
) sizes are supported;Property | Type | Default | Description |
---|---|---|---|
value | number | The current value of the slider. | |
onChange | function | A 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 . | |
onAfterChange | function | A 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 . | |
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. | |
tooltipStyle | object | Style to be applied to tooltip div. | |
tooltipProps | object | Properties applied to the tooltip's <div> element. | |
inputProps | object | Properties applied to the <input> element. DEPRECATED: additional props added to the RangeSlider component's props will be passed to the underlying <input> element. | |
ref | React.Ref<HTMLInputElement> | 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. |
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";
React Bootstrap Range Slider works in most modern web browsers and in Internet Explorer 10+ (with polyfills required for React to work).
Browser | Supported |
---|---|
Chrome | Yes |
Edge | Yes |
Firefox | Yes |
Internet Explorer | 10, 11 |
Opera | Yes |
Safari | Yes |
Samsung Internet | Yes |
UC | Yes |
Yandex | Yes |
Copyright (c) 2020 Jason Wilson
FAQs
A range slider component with tooltips for React Bootstrap that extends the HTML input (type=range) element.
We found that react-bootstrap-range-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.