HTML5 slider bar. How to use the 'noUiSlider'
Good afternoon,
I am trying to implement the 'noUIslider' slider bar (http://refreshless.com/nouislider/) and am struggling even with the first example on their homepage.
I have downloaded the various css and js and unzipped them in a folder. Then I wrote the following html page, but it looks like nothing is working properly (blank html page). Any clue on what I have missed ?
A big thank you for your help and I wish you a nice Sunday.
Best wishes, Laurent
<!DOCTYPE html>
<html>
<head>
<link href="nouislider.min.css" rel="stylesheet">
<style>
#showcase {
margin: 0 20px;
text-align: center;
}
#range {
height: 300px;
margin: 0 auto 30px;
}
#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<script src="nouislider.min.js"></script>
<script>
var range = document.getElementById('range');
noUiSlider.create(range, {
start: [ 20, 80 ], // Handle start position
step: 10, // Slider moves in increments of '10'
margin: 20, // Handles must be more than '20' apart
connect: true, // Display a colored bar between the handles
direction: 'rtl', // Put '0' at the bottom of the slider
orientation: 'vertical', // Orient the slider vertically
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to '100'
'min': 0,
'max': 100
},
pips: { // Show a scale with the slider
mode: 'steps',
density: 2
}
});
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');
// When the slider value changes, update the input and span
range.noUiSlider.on('update', function( values, handle ) {
if ( handle ) {
valueInput.value = values[handle];
} else {
valueSpan.innerHTML = values[handle];
}
});
// When the input changes, set the slider value
valueInput.addEventListener('change', function(){
range.noUiSlider.set([null, this.value]);
});
</script>
</body>
</html>
Answer
<!DOCTYPE html>
<html>
<head>
<link href="//cdn.bootcss.com/noUiSlider/8.5.1/nouislider.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/noUiSlider/8.5.1/nouislider.js"></script>
<style>
#showcase {
margin: 0 20px;
text-align: center;
}
#range {
height: 300px;
margin: 0 auto 30px;
}
#value-span,
#value-input {
width: 50%;
float: left;
display: block;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div id="range"></div>
</body>
<script>
var range = document.getElementById('range');
noUiSlider.create(range, {
start: [ 20, 80 ], // Handle start position
step: 10, // Slider moves in increments of '10'
margin: 20, // Handles must be more than '20' apart
connect: true, // Display a colored bar between the handles
direction: 'rtl', // Put '0' at the bottom of the slider
orientation: 'vertical', // Orient the slider vertically
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
range: { // Slider can select '0' to '100'
'min': 0,
'max': 100
},
pips: { // Show a scale with the slider
mode: 'steps',
density: 2
}
});
var valueInput = document.getElementById('value-input'),
valueSpan = document.getElementById('value-span');
// When the slider value changes, update the input and span
range.noUiSlider.on('update', function( values, handle ) {
if ( handle ) {
valueInput.value = values[handle];
} else {
valueSpan.innerHTML = values[handle];
}
});
// When the input changes, set the slider value
valueInput.addEventListener('change', function(){
range.noUiSlider.set([null, this.value]);
});
</script>
</html>