Jump to content
Michel

Advanced Filtering Module

Recommended Posts

Michel
Posted (edited)

Hi everybody,

I am trying to let my price search a bit nicer but till so far without any results. Does anybody has any idea how to get the following results (see attachment)?

I have the following code an tried to change this in several ways but i can not let it work. I hope someone can help with it. 

[filter name="jr_minimumprice " label="Price Search" display_as="linkboxed"]

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 5000,
      values: [ 10, 1000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "€" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                }
    });
    $( "#amount" ).val( "€" + $( "#slider-range" ).slider( "values", 0 ) +
      " - €" + $( "#slider-range" ).slider( "values", 1 ) );
      
  } );
  </script>
</head>
<body>
 
<p>
  <label for="amount">Prijsklasse:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
 
<div id="slider-range"></div>

[/filtergroup]

pricesearch.PNG

Edited by Michel

Share this post


Link to post

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Please refer to our Privacy Policy.