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.

BaseUI is a React-based UI Component library I used to dress up the slider.

Devices.css is a library that makes importing mockup devices simple, just by loading into their stylesheet.

Developed on CodeSandbox. Used on Callsesh

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



Ryan Soury

Programmer, Tinkerer 🤓 and Berries Forager 🍓. Trusted data for blockchains at