mmarkelov / React Nouislider
Licence: mit
React wrapper on NoUiSlider
Stars: ✭ 41
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Nouislider
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-56.1%)
Mutual labels: react-component
React Absolute Grid
An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Stars: ✭ 910 (+2119.51%)
Mutual labels: react-component
React Animated Weather
Animated weather component for React inspired by Skycons http://darkskyapp.github.io/skycons/ ☀️
Stars: ✭ 34 (-17.07%)
Mutual labels: react-component
React Visual Diff
React component for rendering the diff of two React elements
Stars: ✭ 22 (-46.34%)
Mutual labels: react-component
React Facial Feature Tracker
React Component for Facial Feature Recognition based on the clmtracker
Stars: ✭ 13 (-68.29%)
Mutual labels: react-component
React Prismazoom
A pan and zoom component for React, using CSS transformations.
Stars: ✭ 29 (-29.27%)
Mutual labels: react-component
React Toastify
React notification made easy 🚀 !
Stars: ✭ 8,113 (+19687.8%)
Mutual labels: react-component
Spicy Datatable
React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization.
Stars: ✭ 36 (-12.2%)
Mutual labels: react-component
React Hanko
A Japanese hanko component for React.js
Stars: ✭ 14 (-65.85%)
Mutual labels: react-component
React Planner
✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
Stars: ✭ 846 (+1963.41%)
Mutual labels: react-component
React Grid Carousel
React responsive carousel component w/ grid layout
Stars: ✭ 29 (-29.27%)
Mutual labels: react-component
React Markdown Preview
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.
Stars: ✭ 34 (-17.07%)
Mutual labels: react-component
React Stack Grid
Pinterest like layout components for React.js
Stars: ✭ 803 (+1858.54%)
Mutual labels: react-component
Reimgix
🌇 Get all the benefits of Imgix using React. Supports LQIP.
Stars: ✭ 39 (-4.88%)
Mutual labels: react-component
React Notifications Component
Delightful and highly customisable React Component to notify your users
Stars: ✭ 978 (+2285.37%)
Mutual labels: react-component
React Colorful
🎨 A tiny (2,5 KB) color picker component for React and Preact apps
Stars: ✭ 951 (+2219.51%)
Mutual labels: react-component
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 in a react component.
Documentation
All the options used in nouislider-react are then passed to noUiSlider. See the noUiSlider documentation before opening issues.
Also there are extra options to implement new features:
clickablePips use to move the slider by clicking pips
Usage
npm install nouislider-react
or
yarn add nouislider-react
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
const Slider = () => (
<Nouislider range={{ min: 0, max: 100 }} start={[20, 80]} connect />
);
Examples
Colorpicker:
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 (
<div className="slider" id="colorpicker">
{COLORS.map((item, index) => (
<Nouislider
key={item}
id={item}
start={127}
connect={[true, false]}
orientation="vertical"
range={{
min: 0,
max: 255
}}
onUpdate={this.onUpdate(index)}
/>
))}
<div id="result" style={{ background: color, color }} />
</div>
);
}
}
Non linear slider:
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 (
<div>
<Nouislider
connect
start={[500, 4000]}
behaviour="tap"
range={{
min: [0],
"10%": [500, 500],
"50%": [4000, 1000],
max: [10000]
}}
onSlide={this.onSlide}
/>
{textValue && percent && (
<div>
Value: {textValue}, {percent} %
</div>
)}
</div>
);
}
}
Adding keyboard support:
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
const KeyboardSlider = () => (
<Nouislider
accessibility
start={10}
step={10}
range={{
min: 0,
max: 100
}}
/>
);
Using with ref:
class KeyboardSlider extends React.Component {
state = { ref: null };
changeByRef = () => {
const { ref } = this.state;
if (ref && ref.noUiSlider) {
ref.noUiSlider.set(20);
}
};
render() {
return (
<div>
<button onClick={this.changeByRef}>Change with ref</button>
<Nouislider
instanceRef={instance => {
if (instance && !ref) {
this.setState({ ref: instance });
}
}}
start={0}
range={{
min: 0,
max: 100
}}
/>
</div>
);
}
}
Moving the slider by clicking pips:
import React from "react";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
const KeyboardSlider = () => (
<Nouislider
start={[50]}
pips={{ mode: "count", values: 5 }}
clickablePips
range={{
min: 0,
max: 100
}}
/>
);
Change start:
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 (
<div>
<button onClick={this.handleClick}>Change state</button>
<Nouislider
start={this.state.value}
range={{
min: 0,
max: 100
}}
/>
</div>
);
}
}
Examples
- Fork this repository and clone your version of the repo
- Install dependencies
npm install
- Install example dependencies
cd example && npm install
- Start example server locally
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].