Miss any of our Open RFC calls?Watch the recordings here! »

@motardo/nouislider

1.0.1 • Public • Published

nouislider

A react controlled component wrapper for nouislider

Usage

import React, { Component } from 'react';
import NoUiSlider from '@motardo/nouislider';
 
class App extends Component {
  constructor(props) {
    super(props);
    this.handleSliderUpdate = this.handleSliderUpdate.bind(this);
    this.state = { sliderValues: [200, 800] };
  }
 
  handleSliderUpdate(values) {
    this.setState({ sliderValues: values });
  }
 
  render() {
    return (
      <div className="App">
        <NoUiSlider
          values={this.state.sliderValues}
          onUpdate={this.handleSliderUpdate}
          options={{
            start: [200, 800],
            range: {
              min: 0,
              max: 1000,
            },
            step: 25,
          }}
        />
      </div>
    );
  }
}
 
export default App;

Demo

To run the demo app

npm install @motardo/nouislider
cd node_modules/@motardo/nouislider/demo
npm install
npm start

Install

npm i @motardo/nouislider

DownloadsWeekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • avatar