title: Javascript/Jquery slider change function
body: <p>Ok so here's the problem. I suck at jquery but I'm trying to get better. I have a jquery ui range slider, works well. But I'm trying to add a change function so that when the values are changed, it puts the min age value into one text box, and the max age into another. Everything above the &quot;change&quot; block works fine,  But as soon as i add the block from &quot;change :&quot; downwards to the code, slider fails to appear and I have an obvious error. I've tried this 20 different ways based on online tutorials and I just can't figure out why it's not working.</p>
  <pre><code> $( &quot;#slider-range&quot; ).slider({
        range: true,
        min: 18,
        max: 90,
        
        values: [ &lt;?php echo htmlentities($row_loggedinUser['minAge']) ?&gt;,&lt;?php echo htmlentities($row_loggedinUser['maxAge']) ?&gt; ],
        slide: function( event, ui ) {$( &quot;#amount&quot; ).val(  ui.values[ 0 ] + &quot; - &quot; + ui.values[ 1 ] );}}),
        
        change: function(event, ui){
              var x = document.getElementById('minAgeAmt');
              x.value = $( &quot;#slider-range&quot; ).slider( &quot;values&quot;, 0 );
              var y = document.getElementById('maxAgeAmt');
              y.value = $( &quot;#slider-range&quot; ).slider( &quot;values&quot;, 1 );  
        };
  </code></pre>
  <p>********* EDIT ***********</p>
  <p>Now thanks to Leighton it's working, just one issue . I now have this :</p>
  <pre><code>$( &quot;#slider-range&quot; ).slider({
  range: true,
  
  min: 18,
  max: 90,
  values: [ &lt;?php echo htmlentities($row_loggedinUser['minAge']) ?&gt;,&lt;?php echo htmlentities($row_loggedinUser['maxAge']) ?&gt; ],
  slide: function( event, ui ) {$( &quot;#amount&quot; ).val(&quot;Age Range : &quot; + ui.values[ 0 ] + &quot; - &quot; + ui.values[ 1 ]);},
  change: function(event, ui) {
      var x = document.getElementById('minAgeAmt');
      x.value = $( &quot;#slider-range&quot; ).slider( &quot;values&quot;, 0 );
      var y = document.getElementById('maxAgeAmt');
      y.value = $( &quot;#slider-range&quot; ).slider( &quot;values&quot;, 1 ); 
      
  </code></pre>
  <p>}</p>
  <p>});</p>
  <p>Which works nice, but the bit where the #amount element is given a value only fires (obviously) when a change is made. How can I get it to also fire initially on page load? At the moment when the page loads it looks like this :</p>
  <p><a href="https://i.stack.imgur.com/rNMUJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rNMUJ.png" alt="enter image description here" /></a></p>
  <p>and as soon as I change the slider, :</p>
  <p><a href="https://i.stack.imgur.com/ZTYQI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZTYQI.png" alt="enter image description here" /></a></p>
  <p>I simply want the same caption generated on page load based on initial values</p>