HTML5-Schieberegler. Wie die 'noUiSlider'

Guten Tag,

Ich versuche zur Umsetzung der "noUIslider' Schieberegler (http://refreshless.com/nouislider/) und bin kämpfen, sogar mit dem ersten Beispiel auf Ihrer homepage.

Heruntergeladen habe ich die verschiedenen css und js und entpackt Sie in einen Ordner. Dann schrieb ich die folgende html-Seite, aber es sieht aus wie nichts richtig funktioniert (leere html-Seite). Keine Ahnung, auf was ich verpasst habe ?

Ein großes Dankeschön für deine Hilfe und ich Wünsche Euch noch einen schönen Sonntag.

Die besten Wünsche,
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>

InformationsquelleAutor Laurent | 2016-06-05

JS:

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

Vielen Dank, das ist genau das, was ich suchte. Genießen Sie Ihren Sonntag

InformationsquelleAutor Toney

1

Dein code funktioniert Prima, Sie brauchen Sie, um ein div in den body-tag.
```
<div id="range"></div>
```
mindestens das ist, was mich zu 🙂

InformationsquelleAutor Ewan
0

Setzen, script-tags An der Unterseite

In body-tags einfügen ""

InformationsquelleAutor Toney
0

Versuchen, wickeln Sie Ihre benutzerdefinierte js in der <script> - tag innerhalb einer Funktion zugeordnet ist, die window.onload Veranstaltung.
```
<script>
  window.onload = function() {
    … //your custom code here
  }
</script>
```
InformationsquelleAutor Wachiwi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.