react-input-slider

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