Developing a Slider inside a Phone Mockup with React

Ryan Soury
1 min readAug 14, 2020

--

When developing a simple visual demonstration of a product, it can be useful to incorporate how the product changes from user to user. A slider is a perfect way to demonstrate this.

Sliders can be tedious to set up so it’s important we use the correct tools.

For a React project, I found react-slick to offer enough control to manipulate the output while abstracting away the bulk of the slider logic.
https://github.com/akiran/react-slick

BaseUI is a React-based UI Component library I used to dress up the slider.
https://baseweb.design/

Devices.css is a library that makes importing mockup devices simple, just by loading into their stylesheet.
https://github.com/picturepan2/devices.css

Developed on CodeSandbox. Used on Callsesh https://callsesh.com/

Hope this helps anyone looking to develop React-based Sliders.

--

--

Ryan Soury

Programmer, Tinkerer 🤓 and Berries Forager 🍓. Trusted data for blockchains at https://usher.so