This project contains the source code of a demo app showing how to build a custom slider control component for a React application, which can be used for specifying values within a given range. The demo app builds a simple HSL color picker using custom slider controls to specify values for the hue, saturation and lightness.

Prior experience working with the React framework is required for complete understanding of the demo code. You can checkout the docs to learn more about React.

Here is a screenshot of the demo React application:

Before you begin, make sure you have npm and node installed on your system. It is recommended that you use yarn instead of npm to run and manage the package. Follow this guide to install yarn on your system.

Once you have either yarn or npm installed, run the following commands to get started.

Note that this demo was bootstrapped using the create-react-app package. You can look through this extensive guide for the available scripts.

Using NPM

npm install
npm start

Using Yarn

yarn
yarn start

You can also get a live demo on Code Sandbox.