In my project, I have a container div set to a width of 794px and a range input with a maximum value of 250 and a minimum of 0. I am using CSS transform property like this: scale(1), where the scale is equivalent to 794px.
The challenge arises when the browser window width exceeds 794px. In such cases, I want the div to scale up further. For example, at a window width of 1588px, the div should be scaled with a value of scale(2). Conversely, if the window width is less than 794px, the maximum value (250) should correspond to the window's width.
I attempted various solutions for this issue. Here is the latest one that I tried:
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>
In the current setup, the range value of 250 corresponds to the same scale as setting it to scale(1), which is not the desired outcome.