Wondering what’s next for npm?Check out our public roadmap! »

    react-input-slider
    TypeScript icon, indicating that this package has built-in type declarations

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

    License

    MIT

    Install

    npm i react-input-slider

    DownloadsWeekly Downloads

    14,496

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    39.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar