noUiSlider 8 release information

After a slower, more incremental development period for noUiSlider, it is time for a shakeup. With a lot of attention going to 'You might not need jQuery' and other initiatives, I felt removing the jQuery dependancy in noUiSlider would be a nice project to spend some time on.

Add to that the rapid progress on the Internet Explorer front. Up to noUiSlider 7, IE7 remained supported, mainly because there was never any need to explicity break compatibility. With IE currently at version 11 and Microsoft Edge ('Project Spartan') approaching, now is as good a time as any to drop the really old versions.

noUiSlider 8 removes the jQuery dependancy completely.

Rewriting the plugin, all tests and the documentation is quite an undertaking, so I wanted to get at least the following out of it:

The LibLink project, which I've always liked working on, formed a problem in this port. It's API is completely rooted in jQuery's method system. Considering the number of support request for this feature, even though it is rather complex, was low, I'm going to assume it wasn't used a lot. I wanted the spirit to remain in place, so I put a lot of thought into a replacement feature. It had to be 1) simpler, 2) have a smaller footprint and 3) be more obvious to use.

The solution I came up with is the new update event. It fires on any change in the slider value, and when it is bound. This allows synchronizing with input elements without calling the bound function manually. A feature that is missing is the automatic adding of change events to the inputs: I've attempted to compensate this by providing some additional examples.

What else is new?

Version 7 to 8 migration guide

noUiSlider 7noUiSlider 8
Initialization
$('#slider').noUiSlider({options});
 
var slider = document.getElementById('slider');
noUiSlider.create(slider, {options});
Get the slider value
var value = $('#slider').val();
 
var value = slider.noUiSlider.get();
Set the slider value
$('#slider').val( 50 );
 
slider.noUiSlider.set( 50 );
Add an event listener
$('#slider').on('change', function());
 
slider.noUiSlider.on('change', function());
Bind to an <input> element
$('#slider').Link().to($('input'));
 
slider.noUiSlider.on('update', function( values, handle ) {
	input.value = values[handle];
});

input.addEventListener('change', function(){
	slider.noUiSlider.set(this.value);
});