React slider component
yarn add react-input-slider npm install react-input-slider --savehttp://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