jquery-ui - range slider - save values on slider handles after input submit

Question

I am trying to get the slider values to stay where they were moved to when the SEARCH button is pressed. They default back to the starting values whenever the search is pressed. I have tried all sorts of things and nothing appears to work. Any help would be appreciated.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="css/jquery-ui.css"> 
    </head>

    <body>

        <form method="post" id="formMain">


             <label>Price Range</label>
              <div>
              <div id="slider-range" ></div>
                <input type="hidden" name="price_l" id="price_l" value="<?php echo 
       (isset($_REQUEST["price_l"])?$_REQUEST["price_l"]:"50000")?>"/>
                <input type="hidden" name="price_h" id="price_h" value="<?php echo 
       (isset($_REQUEST["price_h"])?$_REQUEST["price_h"]:"400000")?>"/>
                <input type="text" name="text" id="amount" disabled="" />
            </div>

          <div>
            <input type="submit" value="Search">
          </div>

        </form>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>


    <script>
        var siteSliderRange = function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 5000,
      max: 450000,
      step: 5000,
      values: [ 50000, 400000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          // when the slider values change, update the hidden fields
                    $("#price_l").val(ui.values[ 0 ]);
                    $("#price_h").val(ui.values[ 1 ]);

      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );      
    };
    siteSliderRange();
      </script>


   </body>
   </html>

Welcome to Stack Overflow. The crux of the issue is that the values are not stored anyplace when Submit is hit. Does the form post to a database? Where can the values can be read from? Please clarify what you would prefer to happen. — Twisty, May 27 '20 at 06:37
@Twisty Thanks for the welcome. This code is a subset of a much larger html/php index page, [link](http://centuryvillagebocaraton.com). I shortened it and stripped out all the styling for stack overflow. There are 6 other form drop down boxes that then read a mysql database and present the results. When the user hits the search button the other form boxes the values are retained. — BobC, May 27 '20 at 12:44
@Twisty The values are stored and used against the database. Other form values work (keeping their values). The slider stored values work correctly, each subsequent press of submit keeps the user selected slider value, it just displays wrong, always shows original values. '$ListPriceStart = (isset($_REQUEST["price_l"])?$_REQUEST["price_l"]:""); $ListPriceEnd = (isset($_REQUEST["price_h"])?$_REQUEST["price_h"]:"");' — BobC, May 27 '20 at 13:01

Twisty · Answer 1 · 2020-05-27T15:42:36.353

Consider the following example that uses localStorage to store the slider values in the browser.

https://jsfiddle.net/Twisty/e28pqhy9/11/

HTML

<fieldset class="ui-widget">
  <legend>Price Range</legend>
  <div class="content">
    <div id="slider-range"></div>
    <div id="amount"></div>
    <button>Search</button>
  </div>
</fieldset>

JavaScript

$(function() {
  function getValues(k) {
    if (k == undefined) {
      return false;
    }
    var v = localStorage.getItem(k);
    if (v != null) {
      return JSON.parse(v);
    } else {
      return -1;
    }
  }

  function setValues(k, v) {
    if (k == undefined || v == undefined) {
      return false;
    }
    localStorage.setItem(k, JSON.stringify(v));
  }

  function showRange(tObj, v) {
    tObj.html("$" + v[0] + " - $" + v[1]);
  }

  function searchRange(q) {
    $.post("searchRange.php", {
      price_l: q[0],
      price_h: q[1]
    }, function(response) {
      // Do the needful
    })
  }

  function siteSliderRange(tObj) {
    tObj.slider({
      range: true,
      min: 5000,
      max: 450000,
      step: 5000,
      values: [50000, 400000],
      slide: function(event, ui) {
        showRange($(this).next(), ui.values);
      },
      stop: function(e, ui) {
        setValues($(this).attr("id"), ui.values);
      }
    });
  }

  function init() {
    var cVal = getValues("slider-range");
    if (cVal != -1) {
      showRange($("#amount"), cVal);
      siteSliderRange($("#slider-range"));
      $("#slider-range").slider("values", cVal);
    } else {
      showRange($("#amount"), [50000, 400000]);
      siteSliderRange($("#slider-range"));
      setValues("slider-range", [50000, 400000]);
    }

    $(".content button").click(function() {
      searchRange($("#slider-range").slider("values"));
    });
  }

  init();
});

This will check the localStorage upon initialization to see if any values have been stored. If not, 50000 and 400000 are set as defaults. If there is a value, it will be loaded to both the Slider and the display area. Moving away from the Form model will give you added security. Less chance of someone entering their own values by manually enabling the Text field.

When the User moves the Slider, the display is updated. When they stop it then updates the localStorage. This ensure if they refresh the page or navigate back later, the Slider will recall their selection.

When the Search button is clicked, an AJAX Post is performed, this sends the data to PHP and expects some results to be passed back. I assume those results would be appended to the page.

Update

New Example for PHP: https://jsfiddle.net/Twisty/e28pqhy9/20/

If you want to echo the PHP Values, you can do this, you just need to adjust your JS to look for these values.

HTML

<form>
  <fieldset class="ui-widget">
    <legend>Price Range</legend>
    <div class="content">
      <div id="slider-range"></div>
      <div class="amount-display"></div>
      <input type="hidden" id="amount" value="<?php echo $price_l . ',' . $price_h ?>" />
      <button type="submit">Search</button>
    </div>
  </fieldset>
</form>

JavaScript

$(function() {
  function getValues() {
    return $("#amount").val().split(",");
  }

  function setValues(v) {
    $("#amount").val(v.join(","));
  }

  function showRange(tObj, v) {
    tObj.html("$" + v[0] + " - $" + v[1]);
  }

  function siteSliderRange(tObj) {
    tObj.slider({
      range: true,
      min: 5000,
      max: 450000,
      step: 5000,
      values: getValues(),
      slide: function(event, ui) {
        showRange($(this).next(), ui.values);
      },
      stop: function(e, ui) {
        setValues($(this).attr("id"), ui.values);
      }
    });
  }

  function init() {
    var cVal = getValues();
    showRange($(".amount-display"), cVal);
    siteSliderRange($("#slider-range"));
  }

  init();
});

When the form is submitted, the $_POST['amount'] will be a string and you can use this to convert it back:

PHP

$amounts = explode(",", $_POST['amount']);
$price_l = (int)$amounts[0];
$price_h = (int)$amounts[1];

I will investigate this, although AJAX is a few steps above my pay grade. I have other form (drop down) boxes that work correctly so I would have to convert all of those??? — BobC, May 27 '20 at 13:17
@BobC if this is just one element of a big form, you would have to decide to add an `input` back that gets updated. You do not have to convert everything. You will find it's sometimes better to separate your HTML and PHP and avoid mixing them. If you have a MySQL DB that contain the values, you might consider making a stand alone script that collects those values. You can then use a GET request to grab them in JavaScript/jQuery and use them with the slider. In your original code, it was always defaulting to the original values, ignoring the `input` values, cause that's how you initialized it. — Twisty, May 27 '20 at 14:30

jquery-ui - range slider - save values on slider handles after input submit

1 Answers1