Package Exports

@arch-inc/react-input-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arch-inc/react-input-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-input-slider

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
xreverse	boolean	reverse on x	false
yreverse	boolean	reverse on y	false

License

MIT