HTML5 slider bar. How to use the 'noUiSlider'

Asked 5/6, 2016 at 10:51 Answered 24/8, 2017 at 7:29

Solved javascript jquery css html 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>

Violative answered 5/6, 2016 at 10:51 Comment(0)

<!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>

Whichsoever answered 5/6, 2016 at 11:21 Comment(1)

Many thanks, that is exactly what I was looking for. Enjoy your Sunday – Violative 5/6, 2016 at 12:54

Your code works just fine, you need to add a div in the body tag.

<div id="range"></div>

at least thats what got me going :)

Misdate answered 24/8, 2017 at 7:29 Comment(0)

To put script tags At the bottom

In body tags insert ""

Whichsoever answered 5/6, 2016 at 11:15 Comment(0)

Try to wrap your custom js in the <script> tag inside a function that is assigned to the window.onload event.

<script>
  window.onload = function() {
    … // your custom code here
  }
</script>

Kincardine answered 5/6, 2016 at 11:37 Comment(0)

Recommended topics

Hot tags