Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ximing/react-range-progress
Eases styling of sliders (range inputs).
https://github.com/ximing/react-range-progress
Last synced: 9 days ago
JSON representation
Eases styling of sliders (range inputs).
- Host: GitHub
- URL: https://github.com/ximing/react-range-progress
- Owner: ximing
- License: mit
- Created: 2017-02-10T10:25:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-10T10:26:26.000Z (almost 8 years ago)
- Last Synced: 2024-12-29T18:44:36.712Z (11 days ago)
- Language: HTML
- Homepage: http://www.webpackbin.com/V1M4M4ws-
- Size: 67.4 KB
- Stars: 0
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-range-progress
=======================
[](https://travis-ci.org/vgrafe/react-range-progress) [](https://codecov.io/gh/vgrafe/react-range-progress) [](https://www.npmjs.com/package/react-range-progress)
A visually customizable range input component for react, inspired by [a post on css-tricks](https://css-tricks.com/custom-interactive-range-inputs/).
## Installation
```
npm install react-range-progress --save
```
You can also import from [npmcdn](https://npmcdn.com/react-range-progress) or [unpkg](https://unpkg.com/react-range-progress).
## Playground
You can play around with a few properties on [webpackbin](http://www.webpackbin.com/VkXZkAUsW)
## Props
`hideThumb` - Boolean: Set to true to hide the thumb.
---
`height` - number: Track height in pixels.
---
`width` - number or string: Track width. In pixels when numeric, but can be given 'auto', '80%', etc.
---
`thumbSize` - number: Thumb size in pixels.
---
`min` - number: Minimum range value.
---
`max` - number: Maximum range value.
---
`onChange` - function: Callback called when the range value was changed.
---
`value` - number: Initial range value.
---
The following properties are set with an object with properties r, g, b, a to set red, green, blue (all from 0 to 255) and alpha (0.0 to 1.0) channels. Example for a half opaque
red color:
```js
{
r: 255, g: 0, b: 0, a: .5
}
```
---
`fillColor` - color shape: Fills the track part on the left of the thumb. Defaults to white.
---
`trackColor` - color shape: Color of the 'empty' part of the track. Defaults to white with 50% opacity.
---
`readOnly` - bool: self explanatory.
---
`thumbColor` - color shape: Thumb color. Defaults to white.
### Run the tests
```
npm test
```
### License
MIT. Copyright (c) 2016 Vincent Grafé.