react-slider-measure

Description

react-slider-measure is a customizable, pure JavaScript package, that provides a smooth user interface for picking a value within a measure styled bar.

Demo

Demo

Also: see gatsby/pages folder. You can run it locally using Gatsby just clone the repos and use yarn start in your CLI.

Installation

yarn	npm
yarn add react-slider-measure	npm add react-slider-measure

Usage

import React, { useState } from "react";
import { Slider } from "react-slider-measure";

const App = () => {
	const [value, setValue] =  useState(0);

	return (
		<div>
			<Slider
				activeColor="#5a2cc9"
				steps={100}
				value={value}
				onChange={setValue}
			/>
		</div>
	)
}

API

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

Crédits

Build at Igloo with @loicmahieu.