React component wrapping leongersen/noUiSlider
npm install nouislider-react
**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**
Wraps leongersen/noUiSlider in a react component.
All the options used in nouislider-react are then passed to noUiSlider. See the noUiSlider documentation before opening issues.
clickablePips use to move the slider by clicking pips
``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 = () => (
);
`
`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 (
$3
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 (
start={[500, 4000]}
behaviour="tap"
range={{
min: [0],
"10%": [500, 500],
"50%": [4000, 1000],
max: [10000]
}}
onSlide={this.onSlide}
/>
{textValue && percent && (
Value: {textValue}, {percent} %
)}
);
}
}
`$3
js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";const KeyboardSlider = () => (
start={10}
step={10}
range={{
min: 0,
max: 100
}}
/>
);
`$3
js
class KeyboardSlider extends React.Component {
state = { ref: null }; changeByRef = () => {
const { ref } = this.state;
if (ref && ref.noUiSlider) {
ref.noUiSlider.set(20);
}
};
render() {
return (
if (instance && !ref) {
this.setState({ ref: instance });
}
}}
start={0}
range={{
min: 0,
max: 100
}}
/>
);
}
}
`$3
js
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";const KeyboardSlider = () => (
pips={{ mode: "count", values: 5 }}
clickablePips
range={{
min: 0,
max: 100
}}
/>
);
`$3
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 (
range={{
min: 0,
max: 100
}}
/>
);
}
}
`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
Also you can check them here