Skip to content

Instantly share code, notes, and snippets.

@leongersen
Last active August 28, 2020 07:43
Show Gist options
  • Save leongersen/7560025 to your computer and use it in GitHub Desktop.
Save leongersen/7560025 to your computer and use it in GitHub Desktop.
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.
(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);
});
}());
@renduh
Copy link

renduh commented Aug 27, 2020

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?

@leongersen
Copy link
Author

@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">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment