All Projects → swiftcarrot → React Input Slider

swiftcarrot / React Input Slider

Licence: mit
React input slider component

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Input Slider

Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+961%)
Mutual labels:  slider
React Native Carousel View
react-native carousel, support in both Android and iOS
Stars: ✭ 70 (-30%)
Mutual labels:  slider
React Siema
ReactSiema Demo
Stars: ✭ 90 (-10%)
Mutual labels:  slider
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-46%)
Mutual labels:  slider
D3 Simple Slider
A simple interactive SVG slider
Stars: ✭ 64 (-36%)
Mutual labels:  slider
Reviews slider
A Flutter animated widget made to help users leave reviews and feedbacks
Stars: ✭ 74 (-26%)
Mutual labels:  slider
Img Comparison Slider
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
Stars: ✭ 45 (-55%)
Mutual labels:  slider
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-3%)
Mutual labels:  slider
React Slidy
🍃 React Slidy - Minimalistic and smooth touch slider and carousel component for React
Stars: ✭ 69 (-31%)
Mutual labels:  slider
Gaugeslider
Highly customizable GaugeSlider designed for a Smart Home app. Featured at Medium.
Stars: ✭ 89 (-11%)
Mutual labels:  slider
React Carousel
Lightweight carousel component for react
Stars: ✭ 56 (-44%)
Mutual labels:  slider
Wallop
⛔️ currently unmaintained ⛔️ A minimal JS library for showing & hiding things
Stars: ✭ 1,125 (+1025%)
Mutual labels:  slider
Before after slider
before after slider
Stars: ✭ 80 (-20%)
Mutual labels:  slider
Jcslider
🏂 A responsive slider jQuery plugin with CSS animations
Stars: ✭ 52 (-48%)
Mutual labels:  slider
Mscircularslider
A fully-featured, powerful circular slider for iOS applications
Stars: ✭ 94 (-6%)
Mutual labels:  slider
Sizeslidebutton
A fun Swift UIControl for picking a size
Stars: ✭ 46 (-54%)
Mutual labels:  slider
React Marquee Slider
The marquee slider of your deepest dreams. Only for React.js ⛺
Stars: ✭ 73 (-27%)
Mutual labels:  slider
Rn Slider Switch
Multi slider switch component in React Native
Stars: ✭ 100 (+0%)
Mutual labels:  slider
Sjslider
滑块视图
Stars: ✭ 94 (-6%)
Mutual labels:  slider
Slidercaptcha
Slider captcha support mobile
Stars: ✭ 88 (-12%)
Mutual labels:  slider

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].