6.0.1 • Published 3 years ago
react-input-slider v6.0.1
react-input-slider
React slider component
Installation
yarn add react-input-slider
npm install react-input-slider --save
Storybook Demo
http://react-input-slider.caitouyun.com
Usage
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>
);
}
Styling
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
}
}}
/>
Props
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 |
License
MIT
6.0.1
3 years ago
6.0.0
4 years ago
5.1.7
4 years ago
5.1.6
4 years ago
5.1.5
4 years ago
5.1.4
4 years ago
5.1.3
5 years ago
5.1.2
5 years ago
5.1.1
5 years ago
5.1.0
5 years ago
5.0.16
5 years ago
5.0.15
5 years ago
5.0.14
5 years ago
5.0.13
5 years ago
5.0.12
5 years ago
5.0.10
5 years ago
5.0.9
5 years ago
5.0.8
5 years ago
5.0.7
5 years ago
5.0.6
5 years ago
5.0.5
5 years ago
5.0.4
5 years ago
5.0.3
5 years ago
5.0.2
5 years ago
5.0.1
5 years ago
5.0.0
5 years ago
4.0.1
7 years ago
4.0.0
7 years ago
3.0.0
7 years ago
2.0.2
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.6.0
7 years ago
1.5.0
8 years ago
1.4.0
8 years ago
1.3.1
8 years ago
1.3.0
9 years ago
1.2.0
9 years ago
1.1.2
9 years ago
1.1.1
9 years ago
1.1.0
9 years ago
1.0.9
9 years ago
1.0.8
9 years ago
1.0.7
9 years ago
1.0.6
9 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago