Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-nouislider with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. var reactNouislider = require("react-nouislider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-nouislider v2.0.1

React component wrapping leongersen/noUiSlider

This project is not well maintained, have a look at other natives react sliders: https://www.google.com/search?q=react+slider

react-nouislider

Wraps leongersen/noUiSlider in a react component.

New features

There are no added features in react-nouislider compared to the underlying noUiSlider project. If you need more features please direct them to the https://github.com/leongersen/noUiSlider repository.

Documentation

All the options used in react-nouislider are then passed to noUiSlider. See the noUiSlider documentation before opening issues.

Usage

npm install react-nouislider --save
import React from 'react';
import ReactDOM from 'react-dom';

import Nouislider from 'react-nouislider';

ReactDOM.render(
  <Nouislider
    range={{min: 0, max: 200}}
    start={[0, 100]}
    tooltips
  />, document.querySelector('#container')
);

Development workflow

npm install
npm run dev
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free