143
rated 0 times
[
148]
[
5]
/ answers: 1 / hits: 16256
/ 9 Years ago, fri, may 29, 2015, 12:00:00
So I spent the last couple hours trying to get NoUISlider to work on a basic page but I can't seem to get it to work. I looked all over to find example code but can't seem to find one that works. Here's what I have:
<link href=./css/jquery.nouislider.min.css rel=stylesheet>
<!--<script src=./js/jquery-2.1.4.min.js></script>-->
<script src=./js/jquery.nouislider.all.min.js></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js></script>
<div class=roundCornerBoxTop>
<div id=slider-link></div>
<span class=example-val id=span></span>
<input id=input>
<script>
$(#slider-link).noUiSlider({
start: [ 20 ],
step: 10,
range: {
'min': [ 20 ],
'max': [ 80 ]
}
});
$(#slider-link).Link('lower').to($('#span'));
$(#slider-link).Link('lower').to($('#input'));
</script>
</div>
I thought this is enough to get the slider working?
Here's another page I'm testing:
<head>
<link href=./css/jquery.nouislider.min.css rel=stylesheet>
<script src=./video-js/video.js></script>
<!--<script src=./js/jquery-2.1.4.min.js></script>-->
<script src=./js/jquery.nouislider.all.min.js></script>
<script src=//cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js></script>
<script>
$(#rangeSlider).noUiSlider({
start: [ 950, 5060 ],
range: {
'min': 50,
'max': 5960
},
connect: true,
// Set some default formatting options.
// These options will be applied to any Link
// that doesn't overwrite these values.
format: wNumb({
decimals: 1
})
});
// Place the value in the #value element,
// using the text method.
$(#rangeSlider).Link('lower').to($(#value), text);
// Any selector is acceptable, so we'll
// select both inputs.
$(#rangeSlider).Link('lower').to($(.inputs), null, wNumb({
// Prefix the value with an Euro symbol
prefix: 'u20AC',
// Write the value without decimals
decimals: 0,
postfix: ',-'
}));
function setText( value, handleElement, slider ){
$(#someElement).text( value );
}
// Link accepts functions too.
// The arguments are the slider value,
// the .noUi-handle element and the slider instance.
$(#rangeSlider).Link('upper').to(setText);
// When you pass a string to a link,
// it will create a hidden input.
// You'll see the value appear when you
// alert the form contents.
$(#rangeSlider).Link('upper').to(inputName);
$('button').click(function(){
// Use jQuery to make get the values from the form.
// We'll decode the generated URL to keep it readable.
alert(decodeURIComponent( $(#moneyForm).serialize() ));
// Don't submit the form.
return false;
});
</script>
</head>
<body>
<form id=moneyForm>
<div id=rangeSlider></div>
<div id=value></div>
<input name=one class=inputs>
<input name=two class=inputs>
<div id=someElement></div>
</form>
</body>
JSFiddle: http://jsfiddle.net/wogw6y3f/
http://jsfiddle.net/94zuj1hg/
More From » jquery
