Socket
Socket
Sign inDemoInstall

react-range-slider-input

Package Overview
Dependencies
2
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-range-slider-input

React component wrapper for range-slider-input


Version published
Maintainers
1
Weekly downloads
14,211
increased by3.55%

Weekly downloads

Readme

Source

react-range-slider-input

circleci npm known vulnerabilities javascript style guide license

React component wrapper for range-slider-input (a lightweight [~2kB] library to create range sliders that can capture a value or a range of values with one or two drag handles).

CodeSanbox Demo

Demo


Installation

npm install react-range-slider-input

Usage

v3.0.x and above (recommended)

import RangeSlider from 'react-range-slider-input';
import 'react-range-slider-input/dist/style.css';

export default function () {
    return (
        <RangeSlider />
    );
}

v2.1.x and below

import RangeSlider from 'react-range-slider-input';

export default function () {
    return (
        <RangeSlider />
    );
}

Props

PropertyTypeDefault valueDescription
idstringnullIdentifier string (id attribute value) to be passed to the range slider element.
classNamestringnullString of classes to be passed to the range slider element.
minnumber0Number that specifies the lowest value in the range of permitted values.
Its value must be less than that of max.
maxnumber100Number that specifies the greatest value in the range of permitted values.
Its value must be greater than that of min.
stepnumber / string1Number that specifies the amount by which the slider value(s) will change upon user interaction.
Other than numbers, the value of step can be a string value of any.

From MDN,
A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
defaultValuenumber[][25, 75]Array of two numbers that specify the default values of the lower and upper offsets of the range slider element respectively. If set, the range slider will be rendered as an uncontrolled element. To render it as a controlled element, set the value property.
valuenumber[][]Array of two numbers that specify the values of the lower and upper offsets of the range slider element respectively. If set, the range slider will be rendered as a controlled element.
onInputfunctionNOOPFunction to be called when there is a change in the value(s) of range sliders upon user interaction.
onThumbDragStartfunctionNOOPFunction to be called when the pointerdown event is triggered for any of the thumbs.
onThumbDragEndfunctionNOOPFunction to be called when the pointerup event is triggered for any of the thumbs.
onRangeDragStartfunctionNOOPFunction to be called when the pointerdown event is triggered for the range.
onRangeDragEndfunctionNOOPFunction to be called when the pointerup event is triggered for the range.
disabledbooleanfalseBoolean that specifies if the range slider element is disabled or not.
rangeSlideDisabledbooleanfalseBoolean that specifies if the range is slidable or not.
thumbsDisabledboolean[][false, false]Array of two Booleans which specify if the lower and upper thumbs are disabled or not, respectively. If only one Boolean value is passed instead of an array, the value will apply to both thumbs.
orientationstringhorizontalString that specifies the axis along which the user interaction is to be registered. By default, the range slider element registers the user interaction along the X-axis. It takes two different values: horizontal and vertical.

Elements

Refer to range-slider-input's Elements section

Styling

Refer to range-slider-input's Styling section

License

MIT © Utkarsh Verma

Keywords

FAQs

Last updated on 06 Jan 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc