React component wrapping leongersen/noUiSlider
npm install @x1mrdonut1x/nouislider-react

sh
npm install @x1mrdonut1x/nouislider-react
`
or
`sh
yarn add @x1mrdonut1x/nouislider-react
`
`js
import React from "react";
import Nouislider from "@x1mrdonut1x/nouislider-react";
import "@x1mrdonut1x/nouislider/distribute/nouislider.css";
const Slider = () => (
);
`
Examples
$3
`js
import React from "react";
import Nouislider from "@x1mrdonut1x/nouislider-react";
import "@x1mrdonut1x/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) => (
key={item}
id={item}
start={127}
connect={[true, false]}
orientation="vertical"
range={{
min: 0,
max: 255
}}
onUpdate={this.onUpdate(index)}
/>
))}
);
}
}
`
$3
`js
import React from "react";
import Nouislider from "@x1mrdonut1x/nouislider-react";
import "@x1mrdonut1x/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 (
connect
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 "@x1mrdonut1x/nouislider-react";
import "@x1mrdonut1x/nouislider/distribute/nouislider.css";
const KeyboardSlider = () => (
accessibility
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 (
instanceRef={instance => {
if (instance && !ref) {
this.setState({ ref: instance });
}
}}
start={0}
range={{
min: 0,
max: 100
}}
/>
);
}
}
`
$3
`js
import React from "react";
import Nouislider from "@x1mrdonut1x/nouislider-react";
import "@x1mrdonut1x/nouislider/distribute/nouislider.css";
const KeyboardSlider = () => (
start={[50]}
pips={{ mode: "count", values: 5 }}
clickablePips
range={{
min: 0,
max: 100
}}
/>
);
`
$3
`js
import React from "react";
import Nouislider from "@x1mrdonut1x/nouislider-react";
import "@x1mrdonut1x/nouislider/distribute/nouislider.css";
class KeyboardSlider extends React.Component {
state = { value: 0 };
handleClick = () => {
this.setState(prevState => ({ value: prevState + 10 }));
};
render() {
return (
start={this.state.value}
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
http://localhost:3004`