react-input-slider


React slider component

$3

``sh
yarn add react-input-slider
npm install react-input-slider --save
`

$3

http://react-input-slider.caitouyun.com

$3

`javascript
import React from 'react';
import Slider from 'react-input-slider';

function App() {
const [state, setState] = useState({ x: 10, y: 10 });

return (



);
}
`

$3

v5 introduces a new styling api powered by emotion

`javascript
styles={{
track: {
backgroundColor: 'blue'
},
active: {
backgroundColor: 'red'
},
thumb: {
width: 50,
height: 50
},
disabled: {
opacity: 0.5
}
}}
/>
`

$3

| 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 |

$3

MIT