html - How to trigger javascript function when select print preview

Question

I use rangeslider to create a slider component, it looks like below

However, when I ready for print this, in print preview, the slider bar has scale in while slider button position value keep same with the value in html(In html, when window resize, there is a js function to re-calculate the size of bar and postion of slider button).

slider in print preview:

So my question is, how to call function to re-calculate slider button postion in print preview, like window.resize event.

Appreciate for any comment!!

Answer 1

To detect print requests with javascript you can try:

var beforePrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (mql.matches) {
        beforePrintFunc();
    }
});

window.onbeforeprint = beforePrintFunc;

To detect after print preview event:

var afterPrintFunc = function() {
    ...
}
//for chrome
window.matchMedia('print').addListener(function(mql) {
    if (!mql.matches) {
        afterPrintFunc();
    }
});
window.onafterprint = afterPrintFunc;

However, there may be an easier approach as pointed out by @torazaburo in the comment below as long as you are only making styling changes:

@media print {
    //your print specific styles go here
}