Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-input-range
Advanced tools
InputRange
is a React component allowing users to input numeric values within a specific range. It can accept a single value, or a range of values (min/max). By default, basic styles are applied, but can be overridden depending on your design requirements.
A CodePen demo is available here.
react-input-range
using npm. npm install react-input-range
react-input-range
to use InputRange
component.react-input-range/lib/css/index.css
if you want to apply the default styling.To accept min/max value:
import React from 'react';
import ReactDOM from 'react-dom';
import InputRange from 'react-input-range';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
values: { min: 2, max: 10 },
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(values) {
this.setState({ values });
}
render() {
return (
<InputRange
maxValue={20}
minValue={0}
value={this.state.values}
onChange={this.handleChange} />
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
To accept a single value:
<InputRange
maxValue={20}
minValue={0}
value={this.state.value}
onChange={this.handleChange} />
To format labels:
<InputRange
formatLabel={(value) => `${value}cm`}
value={this.state.value}
onChange={this.handleChange} />
To specify the amount of increment/decrement
<InputRange
step={2}
value={this.state.value}
onChange={this.handleChange} />
Set aria-labelledby
attribute to your component.
Set aria-controls
attribute to your component.
Override the default CSS classes applied to your component and its sub-components.
If this property is set to true, your component is disabled. This means you'll not able to interact with it.
By default, value labels are displayed as plain numbers. If you want to change the display, you can do so by passing in a function. The function can return something different, i.e.: append a unit, reduce the precision of a number.
Set a maximum value for your component. You cannot drag your slider beyond this value.
Set a minimum value for your component. You cannot drag your slider under this value.
Set a name for your form component.
Whenever your user interacts with your component (i.e.: dragging a slider), this function gets called. Inside the function, you should assign the new value to your component.
Every mouse / touch event can trigger multiple updates, therefore causing onChange
callback to fire multiple times. On the other hand, onChangeComplete
callback only gets called when the user stops dragging.
The default increment/decrement of your component is 1. You can change that by setting a different number to this property.
Set the current value for your component. If only a single number is provided, only a single slider will get rendered. If a range object (min/max) is provided, two sliders will get rendered
If you want to work on this project locally, you need to grab all of its dependencies.
npm install
After that, you should be able run to preview
npm run dev
To test
npm test
Contributions are welcome. :)
FAQs
React component for inputting numeric values within a range
The npm package react-input-range receives a total of 50,131 weekly downloads. As such, react-input-range popularity was classified as popular.
We found that react-input-range 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.