slider

React input slider component

Mar 22, 2019
React input slider component

react-input-slider

React input slider component.

View demo Download Source

Installation

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

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

Props

NameTypeDescriptionDefault
axisstringtype of slider ('x', 'y', 'xy')'x'
xnumbervalue of x50
xmaxnumbermax of x100
xminnumbermin of x0
ynumbervalue of y50
ymaxnumbermax of y100
yminnumbermin of y0
xstepnumberstep of x1
ystepnumberstep of y1
onChangefunctionhandleChangenull
onDragEndfunctionhandleDragEndnull

GitHub

Recommended