Rufen Sie auf jQueryUI die Komponente Slider auf.
Wählen Sie auf der rechten Seite den RangeSlider aus
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.41.11.png)
Klicken Sie auf den Link viewSource weiter unten.
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.42.29.png)
Änderung in unserer project.html
kopieren Sie den HTML Code von der Seite eins zu eins in Ihre project.html
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.42.55.png)
<div id="showHide" class="meinButton">Chart ein-/ausblenden</div>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<div class="flex-container">
Änderung 1 in der project.js
kopieren Sie den javaScript Code eins zu eins in die project.js.
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.45.27.png)
$('#save').on('click',function(){
setVariable('Author',$('#varValue').val())
});
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
Zwischenergebnis
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.49.22.png)
Änderung 2 project.js
Das slide Event welches in unserem Zwischenergebnis die Werte der Price Range ändert eignet sich nicht für das setzen eines Wertes. Dieses Event würde beim einstellen nämlich X Anfragen an den Server senden.
Gehen Sie also wieder auf die Seite des Sliders und klicken weiter unten auf die API Dokumentation.
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.50.35.png)
Das stop Event bietet sich in unserem Fall besser an da es erst beim loslassen des Reglers unsere Serveranfrage ausführt.
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.50.47.png)
Um jetzt einen Wertebereich innerhalb eines numerischen Feldes zu setzen benötigen wir die app.field(‚Feldname‘).selectMatch() Methode.
Diese entspricht der Suche innerhalb eines Feldes innerhalb von Qlik, wo wir bei Numerischen Werten mit > Wert1 < Wert2 die Werte dazwischen selektieren.
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.54.03.png)
Unser Beispiel enthielt in Zeile 120 bereits den Ausdruck den wir nun für unseren scrStr geringfügig modifizieren, siehe Zeile 123 im folgenden Code:
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
var scrStr = ">" + ui.values[ 0 ] + "<" + ui.values[ 1 ] ;
app.field('Katalogpreis').selectMatch(scrStr,false);
}
});
Ergebnis
Nun können wir mit dem Schieberegler unser Datenmodell einschränken.
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.54.11.png)
![](http://qlik.binom.net/wp-content/uploads/2018/10/Bildschirmfoto-2018-10-09-um-21.54.24.png)