swiftcarrot / React Input Slider
Licence: mit
React input slider component
Stars: ✭ 100
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
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
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
Wallop
⛔️ currently unmaintained ⛔️ A minimal JS library for showing & hiding things
Stars: ✭ 1,125 (+1025%)
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
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
react-input-slider
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].