jQuery set UI Slider when page loads using URL query string

Question

I've searched through many promising answers under various SO questions, trying each one - to no avail. I've reduced my webpage to focus on just the two issues I've not been able to figure out:

When the page loads the first time, I want to parse a URL query parameter (if it exists), and use the results to set the initial state of jQuery UI sliders that the user will see. This will let people pass around the URL strings with this query parameter to others, who can then launch a browser window with the URL and see exactly the same settings (i.e. the slider handle positions) as the originator. If the query parameter does not exist in the URL, the page should load with default settings - just using the code. So, how can I get a query string from the full URL and parse it before the default HTML shows with sliders set to their fixed initial defaults?
The issue that has so many answers that I've tried is how to programmatically set jQuery UI Sliders. I've tried to run code in different places in the code (see the alert() and following 2 lines) - but no matter where I put the code, it either does not run at all (no alert), or if it does run, but the slider handles never change from their default.

The libraries I'm using are jQuery-1.12.4, jQueryUI-1.12.1, and jQuery-3.1.1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div id="parameters">
        <ul id="sliders">
            <li id="climate-slider">
                <span class="slider-label">Climate: </span>
                <span class="slider-range">Hot to Cold</span>
                <div class="slider"></div>
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            var climateSteps = [
            "Hot",
            "Humid",
            "Dry",
            "Wet"];

        $(function () {
            $("#climate-slider .slider").slider({
                range: true,
                min: 0,
                max: 3,
                values: [0, 3],
                slide: function (event, ui) {
                    climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
                    if (ui.values[0] == ui.values[1]) {
                        /* if user selected a single value (not a range), adjust text to fit */
                        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
                    }
                    else {
                        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
                    }
                }
            })
        });

        $.noConflict();
        (function ($) {

        alert("setting sliders");
        $("#climate-slider").slider("values", 0, 1);
        $("#climate-slider").slider("values", 1, 2);

        })(jQuery);
    </script>
</body>
</html>

Would need an example of URL that you're reading the value from. Then it's simple a matter of catching that with jQuery and then using those values when setting up the Slider. — Twisty, Feb 03 '18 at 22:33
Also, your example is loading too many libraries. either use jQuery 1.12.4 or use jQuery 3.1.1, but do not use both. Whichever one you use should by loaded before the jQuery UI library. — Twisty, Feb 03 '18 at 22:36
The URL format is like this: www.example.com/?sliders=C12 - meaning the climate ("C") slider should have initial handle values of 1 and 2, respectively. More initial slider positions can be specified by just adding 3 more characters to the URL - of course starting with a letter other than "C" for the next slider and so on. I would use the 2 lines after the alert() code to set them, but can't seem where to put that code to make it work. I saw some SO articles about getting a specific query value from the URL, but they all seemed complicated regex-based functions that couldn't get to work. — Jeff Roloff, Feb 04 '18 at 03:50
I'm glad for your mention of the jQuery library imports. Perhaps I should post another question about that - but when I tried to just remove just the jquery-3.1.1 library (which seems to be the odd-man out), then NO jQuery UI elements appear at all. This has never made sense to me, but I just gave up after finding that using all four includes magically made everything work. Any ideas that I might try to clean that up would be appreciated as well, though not the most important thing to me since it is working as-is. — Jeff Roloff, Feb 04 '18 at 04:06
This is what I suggest for reading URL data: https://stackoverflow.com/questions/19491336/get-url-parameter-jquery-or-how-to-get-query-string-values-in-js — Twisty, Feb 04 '18 at 09:27

score 1 · Accepted Answer · answered Feb 04 '18 at 10:08

Here is what I would advise:

$(function() {
  var climateSteps = [
    "Hot",
    "Humid",
    "Dry",
    "Wet"
  ];

  function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
      sURLVariables = sPageURL.split('&'),
      sParameterName,
      i;

    for (i = 0; i < sURLVariables.length; i++) {
      sParameterName = sURLVariables[i].split('=');

      if (sParameterName[0] === sParam) {
        return sParameterName[1] === undefined ? true : sParameterName[1];
      }
    }
  };

  function parseValue(s) {
    var head = s[0];
    var min = parseInt(s[1]);
    var max = parseInt(s[2]);
    var value = [head, min, max];
    return value;
  }

  $("#climate-slider .slider").slider({
    range: true,
    min: 0,
    max: 3,
    values: [0, 3],
    slide: function(event, ui) {
      climateRange = "C" + ui.values[0].toString() + ui.values[1].toString();
      if (ui.values[0] == ui.values[1]) {
        /* if user selected a single value (not a range), adjust text to fit */
        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]]);
      } else {
        $(this).parent().children(".slider-range").text(climateSteps[ui.values[0]] + " to " + climateSteps[ui.values[1]]);
      }
    }
  });

  var urlValue = getUrlParameter("sliders");
  var slideValues = parseValue(urlValue);
  if (slideValues[0] === "C") {
    $("#climate-slider .slider").slider("values", [slideValues[1], slideValues[2]]);
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="parameters">
  <ul id="sliders">
    <li id="climate-slider">
      <span class="slider-label">Climate: </span>
      <span class="slider-range">Hot to Cold</span>
      <div class="slider"></div>
    </li>
  </ul>
</div>

<script type="text/javascript">
</script>

This is example cannot be tested since the URL of this page is not correct. I wrote this example to handle the test URL you provided:

www.example.com/?sliders=C12

We will get the parameter value from sliders and then parse it into "C" , 1 and 2. I store these in an array.

We can then set the values of the slider to these, by passing in an array [1, 2]. See more: http://api.jqueryui.com/slider/#method-values

You could do this in the parsing too:

function parseValue(s) {
  var head = s[0];
  var min = parseInt(s[1]);
  var max = parseInt(s[2]);
  var value = [head, [min, max]];
  return value;
}

Then used like so:

$("#climate-slider .slider").slider("values", sliderValues[1]);

Hope that helps.

you've provided great code - issue #1 is solved by you - the URL parsing is working perfectly. I'm thinking that I have a structural issue in my code (and lack of jQuery understanding) that's causing the sliders still not to update after the URL has been parsed. My JS code starts with: Any ideas or resources you could point me to would be appreciated. — Jeff Roloff, Feb 05 '18 at 22:13
@JeffRoloff It's not clear, yet I suspect it's from using `$.noConflict()`. Not sure why you are using that in this case. In my example, it works, without the `$.noConflict()`. — Twisty, Feb 05 '18 at 22:48

jQuery set UI Slider when page loads using URL query string

1 Answers1