react-slider-measure is a customizable, pure JavaScript package, that provides a smooth user interface for picking a value within a measure styled bar
npm install react-slider-measurereact-slider-measure is a customizable, pure JavaScript package, that provides a smooth user interface for picking a value within a measure styled bar.
Also: see gatsby/pages folder. You can run it locally using Gatsby just clone the repos and use yarn start in your CLI.
| yarn | npm
| -------------------- | -------------------------------------- |
| yarn add react-slider-measure | npm add react-slider-measure |
``js
import React, { useState } from "react";
import { Slider } from "react-slider-measure";
const App = () => {
const [value, setValue] = useState(0);
return (
| Props | Type | Required | Default | Description |
| --------------------------- | -------------- | ----------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| steps | string | true | 40 | Defines the total numbers on the slider |
| value | number | true | - | Slider current value |
| onChange | function | true | - | Retrieve the selected value from the slider |
| activeColor | string | false | #5a2cc9 | Active color for the selected value