Skip to content
React input slider component
Branch: master
Clone or download
Latest commit 8a3d67d May 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src sync Mar 28, 2019
.gitignore refactor Mar 8, 2019
.travis.yml refactor Mar 8, 2019
CHANGELOG.md sync Apr 3, 2019
LICENSE release 1.0.3 Apr 24, 2015
README.md sync May 16, 2019
babel.config.js sync May 15, 2019
package.json sync May 24, 2019
rollup.config.js refactor Mar 8, 2019
yarn.lock sync May 24, 2019

README.md

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

Demo

https://swiftcarrot.dev/react-input-slider

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

License

MIT

You can’t perform that action at this time.