Cant set slider manually

Question

I'm trying to have a slider move to a set position but also activate a function in the place of console.log. but it returns nothing until the slider is moved

javascript:

        $(document).ready(function(){   
        $( function() {
            $("#CPU_GHz").slider({
                range: "min",
                value: 0,
                min: 0,
                max: 10,
                step: 0.1,
            slide: function( event, ui ) {
                $( "#amount_GHz" ).val( "Faster Than: " + ui.value + " GHz" ) ;

            }, 
            change: function(event, ui ) {
                CPU_GHz = ui.value;
                console.log(CPU_GHz);
            }
        });
        $( "#amount_GHz" ).val( "Faster Than: " + $( "#CPU_GHz").slider( "value" ) + " GHz");

      });


            $('#CPU_GHz').val('5').change()
        });

HTML:

<p>  
          <input type="text" id="amount_GHz" readonly style="border:0; color:#2c85c5; font-weight:bold;">
        </p>

        <div id="CPU_GHz"></div>

Vincent G · Answer 1 · 2019-03-10T12:02:48.703

I've changed the value on page load with this line :

$("#CPU_GHz").slider('value',6);

Then you can output the result with the line you already wrote :

$( "#amount_GHz" ).val( "Faster Than: " + $( "#CPU_GHz").slider( "value" ) + " GHz");

See this fiddle

$( function() {
  $("#CPU_GHz").slider({
    range: "min",
    value: 0,
    min: 0,
    max: 10,
    step: 0.1,
    slide: function( event, ui ) {
      $( "#amount_GHz" ).val( "Faster Than: " + ui.value + " GHz" ) ;

    }, 
    change: function(event, ui ) {
      CPU_GHz = ui.value;
      console.log(CPU_GHz);
    }
  });


    $("#CPU_GHz").slider('value',6);

  $( "#amount_GHz" ).val( "Faster Than: " + $( "#CPU_GHz").slider( "value" ) + " GHz");

});

that cant be controlled manually. tho i have tried changing that with a variable it still won't affect what's in the change function — gus, Mar 09 '19 at 23:20

score 0 · Answer 2 · answered Mar 11 '19 at 20:03

Credit goes to: Trigger a jQuery UI slider event

$(function() {
  var cpu = $("#CPU_GHz").slider({
    range: "min",
    value: 5,
    min: 0,
    max: 10,
    step: 0.1,
    slide: function(event, ui) {
      $("#amount_GHz").val("Faster Than: " + ui.value + " GHz");
    },
    change: function(event, ui) {
      CPU_GHz = ui.value;
      console.log(CPU_GHz);
    }
  });
  $("#amount_GHz").val("Faster Than: " + cpu.slider("value") + " GHz");
  cpu.slider('option', 'change')(null, {
    value: cpu.slider('value')
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <input type="text" id="amount_GHz" readonly style="border:0; color:#2c85c5; font-weight:bold;">
</p>

<div id="CPU_GHz"></div>

I tried to do a few other things yet they didn't work as expected. I thought .trigger("change") might work, yet this is not a standard change event. So I checked http://api.jqueryui.com/slider/#event-change and then tried .trigger("slidechange"). This didn't trigger the function either.

There are two ways to do it. If you initialize slider with value: 0 and then set the Value later, this will trigger change:

cpu.slider("option", "value", 5.0);

Or if you have a set Value already, which I would advise, you can also manually trigger it in a round about way:

cpu.slider('option', 'change')(null, {
  value: cpu.slider('value')
});

This is calling the change function and passing event and ui to it, mostly. It's enough to run. Since you're not really using event in this case, it's ok to send nothing. But the function needs to know what the new value will be sop we send an Object with that.

Hope that helps.

Cant set slider manually

2 Answers2