jQuery UI Slider: Change HTML Based on Value

I'm having an issue generating a line of HTML text based on the values of two inputs: a radio button selection and the value of the slider. My example is only partially working at present. When I set the slider position to 2000, and then change my radio button selection, the appropriate text appears. However adjusting the slider again does not affect the result that appears until selecting another radio button. I'd like the result to generate on any input change.

Any advice is much appreciated! https://jsfiddle.net/mL8j0g5w/4/

<div id="slider"></div>
<input type="text" id="amount">

<input type="radio" id="traffic1" name="traffic" value="Test 1">
<input type="radio" id="traffic2" name="traffic" value="Test 2">
<input type="radio" id="traffic3" name="traffic" value="Test 3">
<input type="radio" id="traffic4" name="traffic" value="Test 4">

<p>Results: <span id="result-1"></span></p>

<script>
$( document ).ready(function() {
  $( "#slider" ).slider({
    value:    1000,
    min:      1000,
    max:      3000,
    step:     1000,
    slide:  function( event, ui ) {
      $( "#amount" ).val( ui.value );
    },
  });
} );
</script>

<script>
$(document).ready(function() {
  $('input').on('change', function() {

  if ($('#amount').val() === '2000' && $('input#traffic1').is(":checked")) {
    $('#result-1').html('Value 1');
  }
  else if ($('#amount').val() === '2000' && $('input#traffic2').is(":checked")) {
    $('#result-1').html('Value 2');
  }
  else if ($('#amount').val() === '2000' && $('input#traffic3').is(":checked")) {
    $('#result-1').html('Value 3');
  }
  else if ($('#amount').val() === '2000' && $('input#traffic4').is(":checked")) {
    $('#result-1').html('Value 4');
  }
  else {
    $('#result-1').html('');
  }

  });
});
</script>

Solution

So I'd look at simplifying your code with a switch/case, and the only bit you're missing is that, when you move the slider and you programmatically change the input, you also need to trigger the change event. Otherwise, it seems like you're close! I've included a snippet, and tried to comment -- but ask if it doesn't make sense.

$(document).ready(function() {
  // create the jQueryUI slider
  $("#slider").slider({
    value: 1000,
    min: 1000,
    max: 3000,
    step: 1000,
    slide: function(event, ui) {
      // Here's the missing bit:
      $("#amount")
        // show the value...
        .val(ui.value)
        // ... and tell the DOM it's changed.
        .trigger("change");
    },
  });
  // When any input is changed, run my func.
  $('input').on('change', showResult);
});

var showResult = function() {
  // set some variables, rather than creating the same reference many times...
  let amount = $("#amount").val();
  let trafficVal = $("[name='traffic']:checked").val();
  let resultEl = $("#result-1");

  // First, are we at the middle range?
  if (amount === '2000') {
    // We ARE. Now, do something based on the selected radio value.
    switch (trafficVal) {
      case 'Test 1':
        resultEl.text("Value 1")
        break;
      case 'Test 2':
        resultEl.text("Value 1")
        break;
      case 'Test 3':
        resultEl.text("Value 1")
        break;
      case 'Test 4':
        resultEl.text("Value 1")
        break;
        // in the event of NO radio selected...
      case 'default':
        resultEl.text("");
    }
  } else {
    // We are NOT in the mid range. Blank the result field.
    resultEl.text("");
  }
}

#slider {
  width: 400px;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider"></div>
<input type="text" id="amount">

<input type="radio" id="traffic1" name="traffic" value="Test 1">
<input type="radio" id="traffic2" name="traffic" value="Test 2">
<input type="radio" id="traffic3" name="traffic" value="Test 3">
<input type="radio" id="traffic4" name="traffic" value="Test 4">

<p>Results: <span id="result-1"></span></p>