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 year 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 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:45:32.000Z (over 3 years ago)
- Last Synced: 2025-04-19T18:49:36.832Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://react-slider-measure.now.sh
- Size: 2.89 MB
- Stars: 4
- Watchers: 1
- 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).