
Product
Announcing Socket Fix 2.0
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
react-input-slider
Advanced tools
React slider component
yarn add react-input-slider
npm install react-input-slider --save
http://react-input-slider.caitouyun.com
import React from 'react';
import Slider from 'react-input-slider';
function App() {
const [state, setState] = useState({ x: 10, y: 10 });
return (
<div>
({state.x}, {state.y})
<Slider axis="xy" x={state.x} y={state.y} onChange={setState} />
<Slider
axis="x"
x={state.x}
onChange={({ x }) => setState(state => ({ ...state, x }))}
/>
<Slider axis="y" y={state.y} onChange={({ y }) => setState(state => ({ ...state, y }))} />
</div>
);
}
v5 introduces a new styling api powered by emotion
<Slider
styles={{
track: {
backgroundColor: 'blue'
},
active: {
backgroundColor: 'red'
},
thumb: {
width: 50,
height: 50
},
disabled: {
opacity: 0.5
}
}}
/>
Name | Type | Description | Default |
---|---|---|---|
axis | string | type of slider ('x' , 'y' , 'xy' ) | 'x' |
x | number | value of x | 50 |
xmax | number | max of x | 100 |
xmin | number | min of x | 0 |
y | number | value of y | 50 |
ymax | number | max of y | 100 |
ymin | number | min of y | 0 |
xstep | number | step of x | 1 |
ystep | number | step of y | 1 |
onChange | function | handleChange | null |
onDragStart | function | handleDragStart | null |
onDragEnd | function | handleDragEnd | null |
disabled | boolean | input disabled | false |
xreverse | boolean | reverse on x | false |
yreverse | boolean | reverse on y | false |
MIT
[6.0.1]
FAQs
React input slider component
The npm package react-input-slider receives a total of 10,308 weekly downloads. As such, react-input-slider popularity was classified as popular.
We found that react-input-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.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.