Add !important to jQuery with dynamic Value $(this).val()

Question

how can i add !important to following jQuery with a dynamic value?

I have tried following:

$('#liveStyleH3, #h3, .h3').css("cssText", "font-size: $(this).val()px !important;");

jQuery(document).ready(function($){
var slider = document.getElementById("blank-h3-font-size");
var output = document.getElementById("slideH3Size");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  $('#liveStyleH3, #h3, .h3').css('font-size', $(this).val() + "px", '!important');
}
});

results should look like this:

#liveStyleH3 {
    font-size: 32px !important;
}

Some Users has marked this as a duplicate question which is not true!! I have solved this following way:

$('#liveStyleH3, #h3, .h3').css("cssText", "font-size:" + $(this).val() + "px !important;");

Answer 1

Try this:

$('#liveStyleH3, #h3, .h3').css('font-size', $(this).val() + "px !important");