Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmarkelov/react-nouislider
React wrapper on NoUiSlider
https://github.com/mmarkelov/react-nouislider
nouislider react react-component reactjs
Last synced: 6 days ago
JSON representation
React wrapper on NoUiSlider
- Host: GitHub
- URL: https://github.com/mmarkelov/react-nouislider
- Owner: mmarkelov
- License: mit
- Created: 2018-05-15T13:59:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-20T15:48:17.000Z (11 months ago)
- Last Synced: 2024-10-15T00:32:54.100Z (2 months ago)
- Topics: nouislider, react, react-component, reactjs
- Language: JavaScript
- Homepage: https://mmarkelov.github.io/react-nouislider/
- Size: 4.21 MB
- Stars: 60
- Watchers: 4
- Forks: 21
- Open Issues: 14
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/mmarkelov/react-nouislider)
[](https://coveralls.io/github/mmarkelov/react-nouislider)
**This project is created as react-nouislider package is not well maintained.
Also you can have a look at other natives react sliders: https://www.google.com/search?q=react+slider**
# nouislider-react
Wraps [leongersen/noUiSlider](https://github.com/leongersen/noUiSlider) in a [react component](https://facebook.github.io/react/docs/component-api.html).
## Documentation
All the options used in nouislider-react are then passed to noUiSlider. See the [noUiSlider documentation](http://refreshless.com/nouislider/) before opening issues.
### Also there are extra options to implement new features:
**clickablePips** use to move the slider by clicking pips
## Usage
```sh
npm install nouislider-react
```
or
```sh
yarn add nouislider-react
```
```js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
const Slider = () => (
);
```
## Examples
### Colorpicker:
```js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
import "./colorpicker.css";
const COLORS = ["red", "green", "blue"];
class Colorpicker extends React.Component {
state = {
color: "rgb(127, 127, 127)"
};
onUpdate = index => (render, handle, value, un, percent) => {
colors[index] = value[0];
this.setState({ color: `rgb(${colors.join(",")})` });
};
render() {
const { color } = this.state;
return (
{COLORS.map((item, index) => (
))}
);
}
}
```
### Non linear slider:
```js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
class Slider extends React.Component {
state = {
textValue: null,
percent: null
};
onSlide = (render, handle, value, un, percent) => {
this.setState({
textValue: value[0].toFixed(2),
percent: percent[0].toFixed(2)
});
};
render() {
const { textValue, percent } = this.state;
return (
{textValue && percent && (
Value: {textValue}, {percent} %
)}
);
}
}
```
### Adding keyboard support:
```js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
const KeyboardSlider = () => (
);
```
### Using with ref:
```js
class KeyboardSlider extends React.Component {
state = { ref: null };
changeByRef = () => {
const { ref } = this.state;
if (ref && ref.noUiSlider) {
ref.noUiSlider.set(20);
}
};
render() {
return (
Change with ref
{
if (instance && !ref) {
this.setState({ ref: instance });
}
}}
start={0}
range={{
min: 0,
max: 100
}}
/>
);
}
}
```
### Moving the slider by clicking pips:
```js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
const KeyboardSlider = () => (
);
```
### Change start:
```js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
class KeyboardSlider extends React.Component {
state = { value: 0 };
handleClick = () => {
this.setState(prevState => ({ value: prevState + 10 }));
};
render() {
return (
Change state
);
}
}
```
## Examples
1. Fork this repository and clone your version of the repo
2. Install dependencies
```sh
npm install
```
3. Install example dependencies
```sh
cd example && npm install
```
4. Start example server locally
```sh
npm run dev
```
## TODO
- [ ] Find solution for auto release process
- [ ] Replace custom example process with **docz**
- [ ] Rewrite Typescript declaration
You now have examples running on
`http://localhost:3004`
Also you can check them [here](https://mmarkelov.github.io/react-nouislider/)