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