使用javascript，范围输入和CSS转换的数学：scale（）

Question

I have a div with the width 794px and a range input with max 250 and min 0. I am scaling the div with the css transform: scale(1), where 1 is when the div is actually shown at 794px.

However, when the width of the browser window is greater than that I want to be able to scale up even more so that when the window is at 1588px, the div should have the value scale(2). And when the browser window is smaller than 794px the maximum value (250) should represent the width of the window.

I have tried several different solutions for this, I will only post the last one so I won't confuse anyone.

Javascript:

const baseWidth = 794;
const maxWidth = (baseWidth * 2) + 50;
const workspace = document.getElementById('workspace');
const oWidth = workspace.offsetWidth;
const rangeValue = zoomElement.target.value;
const rangeStepSizeByPixels = (oWidth - 0) / 250;
const rangeStepSizeByPercent = (rangeStepSizeByPixels / oWidth) * 100;
const trueZoom = rangeValue * this.state.rangeStepSize;

this.setState({
    ...this.state,
    actualZoom: trueZoom,
    height: (700 * trueZoom) / 100,
    width: (550 * trueZoom) / 100,
});

HTML:

<section id="infobar" class="inner-margin">
    <input type="range" step="0.4" min="0" max="250" class="zoomslider" value="250">
</section>

<section id="workspace" class="scrollable tender-edit orange-midnight-them">

    <div class="doccontainer" style="width: 794px; height: 1123px;">
        <section class="init-scale" style="transform: scale(1);">
            <div class="doc-header">
            ...
            </div>
            <div class="doc-inner">
            ...
            </div>
            <div class="doc-footer">
            ...
            </div>
        </section>
    </div>

</section>

This resulted in a situation where the range value 250 was the same as setting scale(1), which is not what I am going for.

Answer 1

Well, after getting some help from a friend it turns out that the answer was much simpler than I thought.

const factor = (oWidth - 50) / baseWidth;

(That -50 is only there to set some padding on the parent element.)

With this number I get the multiplication factor that I can then use to set the value of the percentage that I am after, and also to calculate the value that my range input should have as per default.

const rangeValue = zoomElement.target.value;
const trueZoom = (rangeValue / 250) * 100 * this.state.factor;

That is the value that I get when the range input is changed.

The following is my calculation to set the default zoom and the default range value based on the parent element's actual width.

const defaultDocWidth = ((oWidth - 50) * 0.5) / 2;
const newFactor = (defaultDocWidth / (oWidth - 50));
const defaultZoom = (defaultDocWidth) * newFactor;
const defaultRangeValue = (250 / 100) * defaultZoom;