• Stars
    star
    141
  • Rank 259,971 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React input slider component

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

Storybook Demo

http://react-input-slider.caitouyun.com

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

More Repositories

1

react-ui-tree

React tree component with drag & drop
JavaScript
758
star
2

react-input-color

React color picker
JavaScript
244
star
3

queryx

Schema-first and type-safe ORM for Golang and TypeScript
Go
186
star
4

react-progress-label

Progress component for React and React Native
JavaScript
92
star
5

react-frame

React components within an iframe for isolated css styling
JavaScript
55
star
6

bloodhound

bloodhound.js for node and browser
JavaScript
41
star
7

js-tree

Tree structure in javascript
JavaScript
38
star
8

react-grid

react grid component
JavaScript
17
star
9

react-input-number

React number input component
JavaScript
15
star
10

react-input-switch

React toggle switch component
JavaScript
13
star
11

dashi

Dashi is a framework for building GraphQL application in Go and React.
Go
12
star
12

stream-progressbar

Simple progress bar for node stream
JavaScript
8
star
13

react-vis-styles

react-vis styles as component
JavaScript
6
star
14

webpacker

Easy webpack
JavaScript
6
star
15

react-side-sheet

react side sheet
JavaScript
5
star
16

react-auth

Authentication in React and React Native
JavaScript
4
star
17

rex

schema-first and type-safe ORM
JavaScript
3
star
18

react-normalize

normalize.css as react component
JavaScript
3
star
19

request

HTTP client for web and React Native
JavaScript
2
star
20

storage2

html5 storage interface for node and browser
JavaScript
2
star
21

s2i-webpacker

openshift source-to-image for webpacker
Shell
2
star
22

react-ionicons

ionicons svg component for react
JavaScript
2
star
23

gradient-avatar

Default gradient avatar generation
Go
2
star
24

color

go color functions
Go
1
star
25

react-resize-box

JavaScript
1
star
26

primitives

react primitives for web
JavaScript
1
star
27

react-pagination

React pagination component
JavaScript
1
star
28

utils

utils
JavaScript
1
star
29

yaml-loader

webpack yaml loader
JavaScript
1
star
30

babel-preset-swiftcarrot

babel config
JavaScript
1
star