Explore the top 19 most popular React slider components to help you create beautiful and interactive sliders for your apps. These components offer a wide range of features, such as customizable styles, animations, and interactions.
This is a slider which uses react-spring under the hood.
This project aims to be flexible through configuration as well as be easy to use by sane and reasonable defaults.
You can have a real life look how this can be used within storybook at: farbenmeer.github.io/react-spring-slider.
View demo: https://farbenmeer.github.io/react-spring-slider/
View on GitHub: https://github.com/farbenmeer/react-spring-slider
React Awesome Slider . react-awesome-slider is a 60fps, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider/carousel.
Demo
https://swiftcarrot.dev/react-input-slider
React component which uses CSS to animate a child from its current height to height: auto when mounting/updating/unmounting.
CSS does not currently support animating element height to height: auto and so normally javascript is used to achieve this effect.
This component uses CSS to perform the animation, following an algorithm (first described here). The desired height of the element is calculated, and then css is used to transition that height. After the transition has completed the height is set to height: auto.
react-slidedown is perfect for dropdown lists, popup menus, accordions and closeable panels which have varying sized content.
I am not aware of any cross-browser issues from IE10 and onwards.
View on GitHub: https://github.com/frankwallis/react-slidedown
Simple React component to compare two images using slider.
Features
View on GitHub: https://github.com/junkboy0315/react-compare-image
Slideshow framework built w/ react-router 4
Demo: https://bvaughn.github.io/react-presents/
View on GitHub
Wraps leongersen/noUiSlider in a react component.
New features
There are no added features in react-nouislider compared to the underlying noUiSlider project. If you need more features please direct them to the https://github.com/leongersen/noUiSlider repository.
Introduce new users to your app with this material style carousel.
So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Material design guidelines have a solution: Displaying the top benefits in a beautiful auto-rotating carousel!
This project implements such a carousel for Material-UI.
Demo: https://mui.wertarbyte.com/#material-auto-rotating-carousel
View on GitHub
A Slider/Carousel component for React supporting custom css animations.
Features:
GitHub: https://github.com/erichbehrens/react-animated-slider
Welcome to the future. React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles.
Documentation and Examples
Slider Features
GitHub: https://github.com/sghall/react-compound-slider
A carousel/slider-like component for sequentially displaying slides or sets of slides.
GitHub: https://github.com/jane/react-whirligig
This project is no longer being actively maintained. There are some great alternatives to this project out there; we are using rc-slider.
✨DEMO ✨
React Slidy - Minimalistic and smooth touch slider component for React https://react-slidy.midu.dev/
React Slidy is a simple and minimal slider component. It was based on the fabulous lory.js slider altough as the main objective is to achieve the best performance and smoothness a lot of it was rewritten. Also, it’s wrapped on a React component in order to be used on projects using ReactJS.
Browser compatibility
I haven’t did a lot of testing on that but it’s supposed to work on Firefox, Chrome, Edge, Safari and IE 10+. If not, please, fill a issue.
Features
React Web Slider Component - It’s a picture slider.React Swift Slider is a simple image/picture slider for react.
Demo
Demo-1
GitHub: https://github.com/zulucoda/react-swift-slider
Not another carousel; a simpler component that animates horizontal slide transitions between steps of a wizard or levels of a drilldown.
Live Demo: https://jcoreio.github.io/react-view-slider/index.html
GitHub: https://github.com/jcoreio/react-view-slider
SlideRuler component for ReactJS,slider value selector base React.
A full page slider using react and typescript.
CSS agnostic slider component for React.
Live Demo
https://mpowaga.github.io/react-slider/
GitHub: https://github.com/zillow/react-slider
Features
Supports IE9, IE9+, Chrome, Firefox & Safari
Live Demo http://react-component.github.io/slider/examples/handle.html
GitHub: https://github.com/react-component/slider
#reactjs #javascript