algolia / react-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

react-nouislider's Issues

tooltip overlays handle after 2 handles

When using 3 or more handles, the tooltip value overlaps the handle. Handles 1 and 2 hover above/below the handle as they should.

Is there anyway to fix this issue with a quick workaround? I think it targets an undefined class. Any help would be great.

Not working with React 16 due to use of propTypes from React, need to use 'prop-types' module to make it compatible

This is preventing me from upgrading to React 16.

Please could you switch to using the 'prop-types' package to make this work with React 16. Thanks.

"Behavior" attribute not passing into slider

Here's my slider component that in turn encompasses the react-nouidslider component. I'm passing in the behavior prop but the end result doesn't let me drag the range I've created with the slider. Am I doing something wrong?

'use strict';
var moment = require("moment");
var _ = require("underscore");
var React = require("react");
var ReactDOM = require('react-dom');
var classNames = require("classnames");
var Nouislider = require("react-nouislider");

var Slider = React.createClass({
    render: function () {
        var step = this.props.step;
        var range = {
            min: this.props.minWeek,
            max: this.props.maxWeek
        };
        var firstWeek =  0;
        var finalWeek = 0;
        var start = [firstWeek, finalWeek];
        var behavior = "drag";
        return (
            <Nouislider
                range={range}
                start={start}
                step={step}
                connect={true}
                behavior={behavior}
                tooltips
                format={format} />
        );
    }
});

module.exports = Slider;

Remove decimals?

Can't figure out how to remove decimals on the React component, any ideas?

This doesn't work:

format: wNumb({
    decimals: 0,
})

add pips support?

Sliders getting stuck on the edge.

If I have a set of sliders, with range 0 - 100, if both handles get set to 100, you can no longer grab the smaller handle (left). This means you are now stuck at 100.

On the NoUiSlider documentation (https://refreshless.com/nouislider/slider-options/), this is not a problem, so I am trying to figure out why it shows up in this react port.

Anyone else run into this?

Import name

In the example, you import Nouislider, but I see the package as being react-nouislider... is the example misleading, or am I missing something?

nouislider needs to be updated

I believe a grunt task needs to be run on this package: https://www.npmjs.com/package/nouislider-algolia-fork or similar to update the distribute/ directory of the nouislider so that this react wrapper can work properly.

Passing connect array fail

I have a slider with two handles, and I need to have the connect option set to "true" for the lower handle, so it connects to the left edge. This works fine with a single handle and passing in "lower". I've tried commenting out the propType check and passing through values directly to nouislider, and it'll work for the single handle, but not for 2 or more. I just get "noUiSlider: 'connect' option doesn't match handle count." regardless of the number of values in the array. Any ideas?

connect not showing?

connect bar does not render?

Formatting of tooltips

I've tried a few different ways of setting the format of tooltips but is there a way of only showing a whole number with no decimal point?

Flickering on re-render

Firstly thank you for this great react implementation of nouislider.

I am having some flickering issues when my component re-renders. It's just enough to be annoying, like the bar flickers everything I update the state.

Is there a way to prevent this?

Getting the end event

Hi.
Is it possible to get the 'end' event when the user stops moving the slider?
Only found a way to get the events while moving.
Thanks a lot.
Daniel

onStart fires multiple times when sliding, resulting touch stuck

What might cause onStart being fired multiple times?

It works fine on web browsers, so it's not about accidentally binding it multiple times. On android happens following:

• sliding once works fine
• sliding back and forth without stops:
  • start and slide are fired multiple times
  • change and end are fired after all the starts and slides

Result: Clicking anywhere on the screen results onChange and onEnd being fired, making everything except slider inaccessible.

Binding 'this' in onUpdate callback causes infinite render 'call stack exceeded'

Hi,

Apologies if I'm doing something a little stupid as I'm still learning some of this. I'm using Redux-form to build a relatively large form that includes a slider.

Been trying to implement the redux-form custom component example http://redux-form.com/5.3.1/#/faq/custom-component?_k=qnjmi9 and I have found two issues.

If I try to use the onUpdate method without binding this and adding the redux-form model to a static property. It updated the model and also causes a re-render of the slider.. which then renders back at the start values (looks like you slide to make a change and the slide jumps back to its starting position).

If I bind this then the render method is called in a loop causing 'call stack exceeded' error.

Just using a basic example as below

render method returns

            <div className={componentClasses}>
                <Nouislider
                    range={{min: 10, max: 100}}
                    pips={{ mode: 'range', density: 11, format: wNumb({ prefix: '£', postfix: 'k' }) }}
                    step={10}
                    connect={true}
                    start={[40, 70]}
                    onUpdate={this.update.bind(this)}
                    />
                <div>
                    <span><span id="fancy-input-range-lower">40</span>k - <span id="fancy-input-range-upper">70</span>k</span>
                </div>
            </div>

update method

    update(textVal, handle, values) {
        this.props.model.onChange(`${values[0]}k - ${values[1]}k`);
    }

Wondering if anyone has encountered or got around this before?

Thanks in advance

James

onSlide event?

I recently discovered that rerendering onUpdate will make react behave poorly, because update is fired immediately onload. If using update for rendering something, update will trigger a rerender, which will trigger update, which triggers a rerender, and yadda yadda yadda.

on('slide'), on the other hand, does not fire on rerender—only on a slide event (obviously).

I'm willing to add this functionality to the slider if y'all are accepting pull requests :)

Does not support server-side rendering

Hi!

I tried to use this in a project where server-side rendering is used, but nouiSlider wants to access the window object. Can this be solved such that react-nouislider is essentially a no-op if window is not available?

Thanks!

Connect PropTypes have changed

See: https://github.com/algolia/react-nouislider/blob/master/index.js#L60-L64

And: https://refreshless.com/nouislider/slider-options/#section-Connect

Looks like the options for the underlying noUiSlider have changed to boolean or [boolean]

Disabled slider support

Add support for disabled slider http://refreshless.com/nouislider/more/#section-disable

Using "Tooltips" is giving Warning in console

When I use the following:

<Nouislider tooltips={{to: function(value){return Math.round(parseInt(value));}}} />

I'm presented with the following warning in console:

Warning: Failed propType: Invalid proptooltipssupplied toNouislider. Check the render method ofexports.

How to get value?

Obviously initiating a slider via react-nouislider doesn't allow for the noUiSlider.get() method. How can we programmatically access the min/max values of a slider? I would ideally like to be able to get this value directly from the DOM, eg $('some-slider').val().

Error when implementing inside another component

I am using this component as a filter along with React Boostrap Table, and when I try to run it in Browser, I get the following error:

ReferenceError: window is not defined
at :148:12 -> actions = window.navigator.pointerEnabled ? {
at array.filter.a.(anonymous function).(anonymous function) (:8:210)
at :21:2
at Script Document [3]:4:17239
at Q (Script Document [3]:1:518)
at :19:19
at Script Document [3]:4:48
at Q (Script Document [3]:1:518)
at :33:24
at Script Document [3]:3:12578
at Q (Script Document [3]:1:518)
at :41:20
at Script Document [3]:2:7045
at Q (Script Document [3]:1:518)
at :29:20
at Script Document [3]:1:2835
at Q (Script Document [3]:1:518)
at :9:23
at Script Document [3]:1:657
at Q (Script Document [3]:1:518)
at Script Document [3]:1:605
at Script Document [3]:1:610
at Script Document [3]:1:308
at Script Document [3]:1:330
Line: 4
Column: 17239