Socket
Socket
Sign inDemoInstall

nouislider-react

Package Overview
Dependencies
4
Maintainers
1
Versions
57
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

nouislider-react

React component wrapping leongersen/noUiSlider


Version published
Maintainers
1
Weekly downloads
21,117
decreased by-6.99%

Weekly downloads

Readme

Source

Build Status Coverage Status

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

  1. Fork this repository and clone your version of the repo
  2. Install dependencies
npm install
  1. Install example dependencies
cd example && npm install
  1. 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

Keywords

FAQs

Last updated on 20 Jan 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc