hi, i've followed the steps on the documentation and i wanted to have more then one sliders on a page. however it will always mix up everything into one slider, here is my code:

  <script src="https://raw.github.com/leongersen/noUiSlider/master/jquery.nouislider.min.js"></script>

<div class="column">
<section>       
<h1>on/off toggle 1</h1>    
<div id="slider1" class="noUiSlider" style=""></div>
                                <script>
$("#slider1").noUiSlider({
    range: [20, 100]
   ,start: [40, 80]
   ,step: 20
   ,slide: function(){
      var values = $(this).val();
      $("span").text(
         values[0] +
         " - " +
         values[1]
      );
   }
});

</script>
</section>
<section>       
<h1>on/off toggle 2</h1>    
<div id="slider2" class="noUiSlider" style="width:25px"></div>
                                <script>
$("#slider2").noUiSlider({
    range: [0, 1]
   ,start: 0
   ,step: 1
   ,handles: 1
});
</script>
</section>
<section>       
<h1>on/off toggle 2</h1>    
<div id="slider3" class="noUiSlider" style="height:140px;"></div>
                                <script>
$("#slider3").noUiSlider({
    range: [0, 100]
   ,start: 50
   ,handles: 1
   ,orientation: "vertical"

});
</script>
</section>  
</div>

everything is just mashed into one slider somehow... but multiple times

Any way to make 0 at the bottom on the vertical sliders?

If there is no specific reason that the sliders are inverted in vertical mode, I'll submit a pull request with a fix when I'm done.

On Version 2.5.4 the Slider won't go past the +- 100000 values anymore, when setting a step.
See isue #27 (#27)

But now steps are kind of ignored, if the range doesn't start at 0 (zero).

-- Examlpe --
scale: [65,100]
step: 5

regards
Manuel

Hello,

I like this range slider but can you update the range value dynamic. I try to recall $(".noUiSlider").noUiSlider({ onclick but it create a new object like it suppose to but is there a way to update or refresh the range values. Example starts range: [1000, 2500] update to range: [1000, 5000] or range: [1000, 10000]. I'm trying to adjust slider range base on users information.

Thanks...

Dragging the range selectors doesn't work on iOS Devices, other than that, brilliant plugin!

I'm setting up a slider with 2 knobs, and the values of start and scale are [-100, 100]. When the slider is created, the values become [-100, 200].

$( '#slider' ).noUiSlider('init', {
    knobs: 2,
    start: [-100, 100],
    scale: [-100, 100],
    change: function() {
        ...
    },
    end: function() {
        ...
    }
});
$( '#slider' ).html( $( '#slider' ).noUiSlider( 'value' )[0].toString() + ' - ' + $( '#slider' ).noUiSlider( 'value' )[1].toString());  // returns "-100 - 200"

Trying to use noUiSlider with bootstrap: a slider inside of a float element doesn't position the handles/knobs properly when dragging the handles/knobs in IE 8. The handles/knobs appear to be offset by the amount of the margin on the float element.

This is with version 1.1.7, but 0.9.8 does not exhibit this behavior.

Hi,

upgrading the (great) nouislider from a 2 to 3 won't work with an older jQuery. Is an issue? I can't find the minmum requirement for the nouislider. I tried to upgrade but the slider did not work - and as many depenencies I can't upgrade the jQuery right now, because there are a lot plugins which won't work with the newes jQuery.

Regards
Chris

Hi,

I have a setup where I read values for scale and start from data-attributes that are populated from the backend. Here is the setup:

        var priceSlider = $('#js-price-range');
        var priceMin=   priceSlider.attr('data-min');
        var priceMax=   priceSlider.attr('data-max');   
        var priceFrom=  priceSlider.attr('data-from');  
        var priceTo=    priceSlider.attr('data-to');    

        priceSlider.noUiSlider( 'init', {
            scale: [priceMin, priceMax],
            start: [priceFrom, priceTo],
            handles: 2, 
            connect: 'lower'            
        }); 

The values that I test with are 10,100 for scale and 40,60 for start, which are the same values that are being read from the corresponding data-attributes.

The issue is that in this setup using variables, the slider behavior is unexpected and generally unstable with wrong values returned on rendering and moving the slider .

If the same values are hardcoded as [10, 100] and [40, 60], then the slider works as expected.

Thanks.

This would be nice and could be optional. What do you think? How hard would be to implement?

I'm seeing a weird issue when using one handle and button clicks to 'move' the slider. It only happens on mobile webkit browsers and works fine in all desktop browsers. The slider range is [1,400]. Code here:

[see comments below]

If I manually set the slider range to [0,100], clicking the plus button works as expected but otherwise decreases the slider value by 1 on page load and then stops changing the value thereafter. There is an identical slider on the same page using identical code and that is working fine !?

If I do remote USB debugging on Chrome (Android), the slider values do not change on button tap (the touch events are definitely firing and displayed in the js console). On desktop Chrome, the value increments by 1 as expected.

Any ideas?

Let's say I want to allow the use to enter a value in a text box and have it move the slider to the correct position. Is there an official way to accomplish that? If not, can you suggest the easiest way to implement it?

Thanks for the tool, btw.

Hey, this plugin works great on firefox and i.e but after testing the slider dragging on chrome, I have noticed that the handles fail to drag.

This bug is present on both my site, and the nouislider live examples. (http://refreshless.com/nouislider/)
in this instance clicking the bar is the only way to change values.

Environment:
Windows 7
Chrome Version 25.0.1364.97 m

Unless I am missing something, the move() function always triggers the change handler. I have a use case where I don't need that to happen.

I messed around with my local copy and implemented this, so I can submit a patch if you want.

Check out the development version of the jquery.nouislider.js line 222.

I am trying to create a slider that has one handle and a value range from 100 to 1000. This works fine but when I add a step of 5 and I try to slide it, the handle goes backward and runs off the page with values > -100000. There must be something messed up with the calculation of the handle value with step when the range is limited.

http://www.timeland.cz/demo.html

what i am doing wrong? no sliders i can move:)

The current step option, allows for linear values in the slider. It would be nice if the slider allowed a custom array of values. I can think of two use cases for this option:

1. A slider with non-linear numeric values, eg:
   100, 200, 500, 1000, 2000, 5000, 10000
2. A slider with non-numeric values (I know, a bit extreme), eg:
   "never", "rarely", "sometimes", "often"

Both cases can be implemented with a custom slide function, but it would be nice if this functionality was built-in. Here's a jsfiddle with the above examples: http://jsfiddle.net/KheWe/

I followed the steps in the documentation, called the .noUiSlider function on a div without error, but nothing is displayed.

I included the js-file and the two css-files.

Btw: In the documentation some instructions on which files to include and their purpose would be nice!

It's amazing lightweight slider. When i want edit price slider on the fly related to other selection (color,size,etc...) . I need to edit slider range on the fly.

I've trying to use this snippet. It not helps.

Code:

$("#slider-range").noUiSlider({
range:[10,100]
});

Result:

It is not a issue, but I hope when I touch the bar(not handle),
handle moves where I touched immediately and I can move it, would be nice.

Currently, I have to touch exactly the handle. If I miss-touch the handle,it means
touch the bar in most cases. It happens nothing, and when I detouch my finger
from screen to touch again, handle moves where I touched.and I have to touch
again exactly where the handle is.

I hope that handle moves here when I touch here.

Thank you.

Hi Léon,
thank you for the credits on your project page :)

I've found a little bug in your style example on the homepage:

.noUi_sliderKnob:hover,
.noUi_activeHandle { } { background: #adcbe1; border-color: #2673AB; }

There is an empty bracket.

Perhaps you want to link to your github Repository.

I found out that the style examples do not work in IE properly, but I had no time to fix it yet. There are good chances that the slider works in IE6 as well.

I am plugging this slider into a mobile project I am working on based on top of HTML5 Boilerplate Mobile. When I set the width of the .noUiSlider element to 100%, the .midbar displays past the .upperHandle, and the .upperHandle is not placed in accordance to the 'start' parameter I set.

Sorry for my English

callback functions and information about which slider are moved

In version 2.1.4:

Calling move resets the scale value back to [0, 100].

$("#noUiSlider").noUiSlider('init', {
  scale: [0, 256]
});
// Scale is set to [0, 256]

$("#noUiSlider").noUiSlider('move', {
  knob: 0,
  to: 0
});
// Scale is now set to [0, 100]

The 'move' action is somewhat under-documented (and I'm having trouble figuring out the source), but it LOOKS like you need to call it once for the lower handle, and again for the upper handle.

The problem is. Let's say the slider already exists, with a range goes from 0-100.

And I want to set the handles to 80..90, regardless of what they were previously.

So I do something like:

$("#noUiSlider").noUiSlider('move',{ handle: 'lower', to: 80});
$("#noUiSlider").noUiSlider('move',{ handle: 'upper', to: 90});

The problem is that if the previous values were, say, 40..50, when I do the first line, setting the lower handle to 80... it'll fail because 80 is greater than 50, it can't do that, it violates the invariant. So the lower gets set to, I think, just 50, silently. And then the upper gets set to 90. And I'm left with 50..90 instead of the 80..90 I desired.

What I really want is a way to say, like $("#noUiSlider").noUiSlider('move',{lower: 80, upper: 90}); or maybe just $("#noUiSlider").noUiSlider('move',[80,90]); -- a way to set upper and lower at once, and as long as lower is less than upper, I know that they'll actually BE that after the 'move' was called, regardless of previous state.

Is this hypothetically do-able?

Or is it already do-able and I'm just missing it?

Sorry for my English. I found two errors. I'll try to show it on jsfiddle

I set a big range in scale (ex. [100, 9999998]) and set slider width 200px.

First bug:

Sandbox: http://jsfiddle.net/nGmT8/1/

When i set knob:2 to 1000, then scale automatically set to [0, 100]
I fixed this by adding in 'move' action - parametr scale, but it is not convenient

Example:

$("#noUiSlider").noUiSlider('move', {
scale:[100, 9999998],
knob:$("#whichKnob").val(),
to:$("#valueInput input").val()
})
)

Screenshot: http://clip2net.com/s/2eBSr

Second bug:

Sandbox: http://jsfiddle.net/nGmT8/2/

When scale range is very big and move knob 1 to 1999998, i get a wrong value 1950080

Screenshot: http://clip2net.com/s/2eBVt

The end :)

Thanks for slider

I just updated noUiSlider from 0.9.8, and I notice that with more that one slider on the page, the change event is broadcast to all sliders on the page. In addition, any clicks on the page (even outside the slider) cause a change event.

I am testing in IE 8.

This is with version 1.1.7, but 0.9.8 does not exhibit this behavior.

Hey,

Great plugin!

Just one issue, when you make a change to the input field below the slider it does not fire off the .change command which is not ideal. Can you tell me if this is desired behaviour and I will need to find a work around or if you can suggest how to accomplish this.

Thanks

Are there any plans to support a step smaller than 1? Decimal steps, like snapping to 0.1 increments would really help me out on a project I'm working on.

Thanks!

Hello,

I found a bug in Firefox: when setting the position of the slider knobs when the slider is hidden, the slider size and position changes unexpectedly. This does not happen in IE.

This gist demonstrates the problem: https://gist.github.com/2423989

The slider div is hidden/shown via the button, and the input fields below the slider control the position of the knobs. To reproduce the problem:

1. Click on the button to show the slider.
2. Set the sliders knobs to a known position, either by dragging, clicking, or using the input fields below the slider.
3. Click on the button to hide the slider.
4. Set the sliders knobs to a different position, using the input fields.
5. Click on the button to show the slider.
6. The slider knobs are in what seems to be the incorrect positions.

I can provide screenshots or similar if that would be helpful, too.

Is this the expected way to change the slider values, or should I be using the API in a different way?

Hello.
Very cool plugin btw 👍
I need a feature to stop handles when they are side by side.
You can see my solution here: http://srj.im/html/remny/acces.html
This one is so buggy. http://jsfiddle.net/AcgfJ/ — call functions.

Is there an another way to solve this?
Thanks!

Is there a reason you didn't add the 'end' event to version 3? I added it back easy enough but I was wondering why it was removed.

When you try to move programatically the slider at the event change callback, the function comes into an "infinite loop state".

Plugin version 1.3.

Tested on Firefox 12, Safari 5 and Chrome on Mac Book Air.

Code:

$(".slider-container").noUiSlider("init", { dontActivate: "lower", scale: [5, 50], startMax: 20 , tracker:
function(){
$('#distance').text(($(".slider-container").noUiSlider("getValue")[0]).toFixed(2)); },
change:
function(){
var distance = ($(".slider-container").noUiSlider("getValue")[0]).toFixed(2);
var normalizedDistance = getNormalizedDistance(distance);
// createActivityMatrix(Constantes.BUSINESS_ACTIVITY_KIND_0_OFFER, normalizedDistance, 0, -1, true, true);
$(".slider-container").noUiSlider("move", {moveStyle: "animate", setTo: [normalizedDistance]});

        }
});

When using step, if you drag too quickly then odd numbers are generated. In the example here (http://refreshless.com/nouislider/#options) with "Snap to steps of 20" set, it's very easy to get numbers like 21, 38, 59. Clicking also produces odd numbers. IMHO step should restrict the number to multiples of the step. Otherwise it's great!

:-D

If you drag by mouse down at the slider element, not the sliderknob, IE7 fails to trigger the tracker.

Dragging with mouse down at the knob, fires the tracker correctly.

I'm trying to display a noUiSlider inside of a Twitter Bootstrap Popover. I can get the slider to init, but it doesn't display the handles or midbar. Here is what I'm talking about: http://jsfiddle.net/uE2dZ/
Is there some trick to get this to work?

I'm running into a peculiar issue with this plugin when trying to set a relatively small scale of 1-5 and step of 1. The purpose is for a form that allows users to rate their experience from 1 to 5. The issue I'm coming across is that clicking the bar to try to select another option is not working, but when I drag the handle it works fine.

I set up a fiddle with the example code from http://refreshless.com/nouislider/examples/, all I changed was adding handles, scale, start, and step on init. Check it out at http://jsfiddle.net/Pg6yG/

Also, saw it mentioned before and wanted to put my hat in the ring voting for the ability to drag in the bar as well.

I don't know how to modify options on the fly.

According to
http://stackoverflow.com/a/6006388/1678191

some jQuery plugins offering a update mechanism like

$("#foo").coolPlugin("update",{someOption:1});

Is there some similar mechanism implemented in noUiSlider ?

Loading the script in ie7 fails.

If I remove the comma at line 22 of jquery.nousslider.js, everyting works fine.

From:
'clickmove' : '',
To:
'clickmove' : ''

When using the "step" option so the knobs snap when sliding them, clicking on the bar returns the correct value but the knobs don't snap to the correct position. The expected result when clicking on the bar is that the knob snaps to the nearest step. jQuery UI Slider has it right, click the bar to see how this should work: http://jqueryui.com/demos/slider/steps.html

I tried calling 'move' on 'end' event to force the knob to snap into place, but it didn't do anything.

if (type == 'click') {
    $( "#sliderrange" ).noUiSlider('move', {
        knob: 0,
        scale: [0,6],
        to: $(this).noUiSlider( 'value' )[1]
     });
}

Using Twitter Bootstrap with noUiSlider no longer works with the latest version (2.3).

I have set up a fiddle to show what happens.

http://jsfiddle.net/NGPbK/

This worked fine with the previous version of bootstrap but now its throwing errors on mouse move.

To re-create move the slider and then move your mouse.

On the example of your website: http://refreshless.com/nouislider/ if you click "Disable!" check box, you're still able to move the knobs, when you click on the slider track (midbar?). Clicking on the knobs works correctly.

Thanks for the great plugin. I am a bit stuck on implementing it correctly.

Please take a look at this fiddle: http://jsfiddle.net/mm34t/4/

You can see that the slider updates the fields in .5 decimal point increments. In my local test it shows even more decimal points, up to 10. I am guessing this has to do with the pixel-length of the slider.

How can I set it up so that it only shows whole numbers?

Would make for a cleaner UI if you need to have a bunch of these in a row on a long horizontal layout.

Hello Leon;
Sorry if this may sound a little lame, but really need help right now. I want to create a slider with one handle.

That works with this:
$('#ageslider,#retireageslider').noUiSlider('init', {
handles: 1,
connect: "lower",
});

after this what i wanna do is print the value inside a div while i move the slider handle, which should have a range from 18 to 99...
Just cant put this together.

Please help...

Thank You;
Pratik

If I add the following properties to the noUiSlider class:
border-width: 0px 16px 0px 15px;
border-color: red;

Clicking on the border itself (not on the slider track), the knob goes over the border.
I'd expect the nearest knob to go to the maximum/minimum possible value, right before the border.

Dragging the knob works properly and does not go over the border, as it should be.

When using step, if you drag too quickly then odd numbers are generated. In the example here (http://refreshless.com/nouislider/#options) with "Snap to steps of 20" set, it's very easy to get numbers like 21, 38, 59. Clicking also produces odd numbers. IMHO step should restrict the number to multiples of the step. Otherwise it's great!

:-D

Hey, love the slider so far, but ran into problems with windows 8 touch and chrome.

On the demos on your site, i can touchdrag on chrome launched in windows 8 mode but on chrome in desktop mode neither click nor touch work. Is this an issue we've got to wait for chrome to resolve?