![Build Status](https://travis-ci.org/mmarkelov/react-nouislider)
![Coverage Status](https://coveralls.io/github/mmarkelov/react-nouislider)

@x1mrdonut1x/nouislider-react

React 18 compatible version of nouislider-react.

Documentation

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

$3

clickablePips use to move the slider by clicking pips

Usage

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`

Also you can check them here