Add background opacity slider control for player in Twine 2.7 Sugarcube 2.36.1

Question

I am trying to add a slider functionality to Twine 2.7 with Sugarcube to the StoryCaption passage that will dynamically update a Div I use for background images and videos so that players can adjust the appearance to their preference in a game.

Sadly looking for guidance on programming on this platform can be difficult, so hopefully you all can offer some direction. Ideally I want to update the RGBa so I can add an additional functionality in a separate option to adjust the background div color as well for those with color blindness issues.

My div in a normal passage is

<div class="bg-target" id="bgoverlay"></div>

and the CSS looks like:

.bg-style {
    background-attachment: fixed;
    background-color: rgba(180,180,230);
    background-blend-mode: add;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    inset: 0;
    position: fixed;
    z-index: -100;
    filter: grayscale(60%);
    animation: fadeIn 1s;
    min-height:100%;
}

I can get a slider into the StoryCaption reusing this code but I have no idea how to get it to affect the passage in any way:

<div class="slidecontainer"><form>
    <label>Background Visibility</label>
    <<input type="range" name="bgopacity" id="bgopacity" value="75" min="0" max="100" step="1" onchange="rangevalue.value=value">
    <<output id="rangevalue">75</output>
</form></div>`

Any direction or guidance is immensely welcomed, my googlefu has been unsuccessful finding direction, and thank you in advance.