A small handler to initialize noUiSlider with inline attributes. Implementation is roughly inspired by, but not fully compatible to, the specification for input[type="range"]. Attributes with or without the 'data-' prefix will be handled.

nouislider-inline.js

(function(){

	'use strict';

	$('[data-slider]').each(function(){

		function d(a,b){
			return parseFloat(a.attr(b) || a.attr('data-'+b));
		}
	
		var
		 min = d($(this),'min')
		,max = d($(this),'max')
		,step = d($(this),'step')
		,value = d($(this),'value')
		,range = !isNaN(min) && !isNaN(max) ? { 'min': min, 'max': max } : { 'min': 0, 'max': 100 }
		,start = !isNaN(value) ? value : ( range[1] - range[0] ) / 2
		,settings = {
			 range: range
			,step: !isNaN(step) ? step : 1
			,start: start
			,serialization: {
				resolution: 1
			}
		};
		   
		$(this).noUiSlider(settings);

	});

}());

	

Hi leongersen - first of all, thank you for nouislider, it's brilliant!

I am interested in this gist because I want to use lots of nouisliders in a Vue page. I was thinking of writing a nouislider component but this might do the trick for what I need if I can bind the Vue variables to the inline settings for the slider.

Quick question, if I was to include this js, what format would the html have to be?

@renduh, This gist uses jQuery (and an older noUiSlider version), but it could easily be rewritten without it. The html would look something like the following:

<div id="slider" data-min="1" data-max="100" data-step="10">