React input slider component

by React

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

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
onDragEnd function handleDragEnd null

GitHub