Home

Awesome

react-input-slider

npm npm Build Status codecov styled with prettier

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

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
onDragStartfunctionhandleDragStartnull
onDragEndfunctionhandleDragEndnull
disabledbooleaninput disabledfalse
xreversebooleanreverse on xfalse
yreversebooleanreverse on yfalse

License

MIT