https://github.com/pixelize/react-slider-measure

react-slider-measure is a customizable, pure JavaScript package, that provides a smooth user interface for picking a value within a measure styled bar
https://github.com/pixelize/react-slider-measure

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/pixelize/react-slider-measure
• Owner: pixelize
• Created: 2019-09-10T13:43:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T09:45:32.000Z (almost 2 years ago)
• Last Synced: 2024-04-23T22:10:02.361Z (8 months ago)
• Language: TypeScript
• Homepage: https://react-slider-measure.now.sh
• Size: 2.89 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://react-slider-measure.now.sh/)

Also: see gatsby/pages folder. You can run it locally using [Gatsby](https://www.gatsbyjs.org/) 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

```js

import React, { useState } from "react";

import { Slider } from "react-slider-measure";

const App = () => {

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

	return (

		


			

		

	)

}

```


## 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](https://github.com/oicmahieu).