React Slider and The Most Popular components

Sliders allow users to make selections from a range of values. Sliders reflect a range of values along a bar, from which users may select a single value.


1. React spring slider

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

2.React Awesome 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.

React Awesome Slider

3.React input slider component.

react-input-slider

React input slider component

Demo
https://swiftcarrot.dev/react-input-slider

4.React slidedown

React component which uses CSS to animate a child from its current height to height: auto when mounting/updating/unmounting.

React slidedown

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.

Live Demo

View on GitHub: https://github.com/frankwallis/react-slidedown

5. React Compare Image

Simple React component to compare two images using slider.

React Compare Image

Features

  • Simple
  • Responsive (fit to the parent width)
  • Size difference between two images handled correctly. Element size determined by following two factors:
  • width of the parent
  • right image’s aspect ratio

Demo & Sample codes

View on GitHub: https://github.com/junkboy0315/react-compare-image

6.React presents

Slideshow framework built w/ react-router 4

React presents

Demo: https://bvaughn.github.io/react-presents/
View on GitHub

7.React nouislider

Wraps leongersen/noUiSlider in a react component.

React nouislider

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.

View on GitHub

8.Material AutoRotatingCarousel

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.

Material AutoRotatingCarousel

Demo: https://mui.wertarbyte.com/#material-auto-rotating-carousel
View on GitHub

9. React animated slider

A Slider/Carousel component for React supporting custom css animations.

React animated slider

Features:

  • Ready to use slider component with animations
  • Easy customization
  • Horizontal or vertical navigation
  • Swipe navigation on touch devices
  • Infinite slider
  • Autoplay
  • Supports any element as children
  • Clean DOM without dirty manipulations
  • Support for CSS modules
  • Works with SSR
  • Works on IE11

Demo - Codesandbox Playground

GitHub: https://github.com/erichbehrens/react-animated-slider

10. React compound slider

Welcome to the future. React Compound Slider is a tiny (5kb) slider component with no opinion about markup or styles.
Documentation and Examples

React compound slider

Slider Features

  • Small size (4.3kb)
  • Makes no assumptions about your markup
  • Supports SVG sliders
  • Supports typescript
  • Precise control over user interactions and styling
  • Horizontal/vertical display
  • The display of values can be reversed
  • Supports mouse and touch events (tested in IE9+, Chrome, Firefox & Safari)
  • Supports keyboard events so handles can be moved using arrow keys
  • Create any type of slider (value, range, n-handled sliders)
  • Generates uniformly spaced, human-readable tick values to label your slider
  • Integrates seemlessly with any app styling approach (CSS, CSS-in-JS, Inline-styles)
  • Interaction modes (Allow crossing, Prevent crossing, Pushable mode, Create your own mode)

GitHub: https://github.com/sghall/react-compound-slider

11.React whirligig

A carousel/slider-like component for sequentially displaying slides or sets of slides.

React whirligig

GitHub: https://github.com/jane/react-whirligig

12. A React Slider Component

This project is no longer being actively maintained. There are some great alternatives to this project out there; we are using rc-slider.

A React Slider Component

DEMO

View on GitHub

13. React Slidy

React Slidy

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

  • 1:1 slide movement
  • Optimized for smoothness and performance
  • Lazy Loading for slider and for every slide
  • Server rendering compatible

View on GitHub

14. React Swift Slider

React Web Slider Component - It’s a picture slider.React Swift Slider is a simple image/picture slider for react.

React Swift Slider

Demo
Demo-1

GitHub: https://github.com/zulucoda/react-swift-slider

15.React view slider

Not another carousel; a simpler component that animates horizontal slide transitions between steps of a wizard or levels of a drilldown.

React view slider
Live Demo: https://jcoreio.github.io/react-view-slider/index.html

GitHub: https://github.com/jcoreio/react-view-slider

16.Slide Ruler Demo

SlideRuler component for ReactJS, slider value selector base React.

Slide Ruler

17.React Page Slider

A full page slider using react and Typescript.

18.React Slide

CSS agnostic slider component for React.
React Slide

Live Demo
https://mpowaga.github.io/react-slider/

GitHub: https://github.com/zillow/react-slider

19.Slider UI component for React.

Slider UI component for React

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

No comments:

Post a Comment