jQuery set UI Slider when page loads using URL query string

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>

Solution

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.