Nerdy Poly Millionaires
Publish your own packages to the world's most popular software ecosystem with npm Pro.Get started »

react-input-slider

5.1.4 • Public • Published

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
    },
    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

License

MIT

Install

npm i react-input-slider

DownloadsWeekly Downloads

8,741

Version

5.1.4

License

MIT

Unpacked Size

34.6 kB

Total Files

7

Last publish

Collaborators

  • avatar