Javascript Passing Parameters When Clicked on Link On Another Page

Question

I have a slider I have implemented on my site and wanted to land on a specific value when clicking on a link on another page:

Here is the script and the parameter I would like to change:

$("#screeningSlider").ionRangeSlider({
    hide_min_max: true,
    keyboard: true,
    from: 20,
    min: 1,
    max: 2000,
    step: 0,
    grid_num: 4,
    prettify_separator: ",",
    postfix: " Units",
    max_postfix: "+",
    force_edges: true,

});

So when on another page, I'd like to click on a button that would allow me to land on this page, But the parameter FROM to be 10 instead of the default value above. This should only occur when selecting from that specific button.

Here is my site that has the slider: http://therrd.com/screening.html#tenant-Screening

Answer 1

If you don't want to use server side for that, you can do it this way

[EDITED]

1 - set the link

<a href="yourpage.html?slide=10">Go</a>

2 - set your function in yourpage.html

  vals = {max: 100, min: 0, def: 20} //use your own values here for max min and def
  var param = window.location.href.split("slide=");
  slide = isNaN(param[param.length - 1]) || 
          param[param.length - 1] > vals.max ||
          param[param.length - 1] < vals.min ? vals.def : param[param.length - 1];
          //check if there is a url param, if it's a number and if it's in range      

  $("#screeningSlider").ionRangeSlider({
        hide_min_max: true,
        keyboard: true,
        from: slide,
        min: 1,
        max: 2000,
        step: 0,
        grid_num: 4,
        prettify_separator: ",",
        postfix: " Units",
        max_postfix: "+",
        force_edges: true,

  });

Answer 2

Sharing JavaScript values between pages isn't really possible without storing it in some other form, and then parsing it back into JavaScript.

You could use URL parameters and then parse the incoming URL and import the default from value from there.

<a href='http://www.yoursite/?from=10'>Referral </a>

The downside to this is, obvious, anyone could just peek at your URL and then try and game your system (think what may happen if they set it to ?from=0 and you didn't protect against that). You'd also need to protect against injection attacks.

You could use localStorage to set a key after they've clicked that specific button, and then check localStorage for that key when loading the main page to get the expected default from value.

Set the value on click for the special link:

$('#link').on('click', function(){
  localStorage.setItem('fromValue', 10);
});

And retrieve it on load for the resulting page:

var fromValue = localStorage.getItem('fromValue')
if (fromValue) { /* adjust the slider's default from value*/ }