Rufen Sie auf jQueryUI die Komponente Slider auf.

Wählen Sie auf der rechten Seite den RangeSlider aus

 

Klicken Sie auf den Link viewSource weiter unten.

 

Änderung in unserer project.html

kopieren Sie den HTML Code von der Seite eins zu eins in Ihre project.html

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

  $('#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

 

Ä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.

 

Das stop Event bietet sich in unserem Fall besser an da es erst beim loslassen des Reglers unsere Serveranfrage ausführt.

 

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.

 

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.

Share