Answer For Chart.js Canvas

• Extending the below example for a chart.js canvas
• You can set the width of the y axis (50px in my example)

    options: {
        scales: {
            y: {
                afterFit: function (scaleInstance) {
                    scaleInstance.width = 50; // sets the width to 50px
                }
            }
        }
    }

• Use this known value to set the width of the graph using the slider input

const sliderToPercentageWidth = (sliderVal) => {
    return (50 + (containerWidth - 50) * (sliderVal/100) )
};

• You can also keep track of the containerWidth on window resize using

window.addEventListener("resize", (event) => {
    containerWidth = container.offsetWidth;
});

This all comes together to give the code below (also on CodePen):

HTML

<div id="container">
    <div id="graph">
        <canvas id="myChart"></canvas>
    </div>
    <input id="width-selector" type="range" value="50">
    
</div>

CSS

#container{
    background-color: #ff000020;
    width: 80vw;
    height:90vh;
}

#graph{
    height: 70vh;
    width: 40vw;
    background-color: #00ff0020;
}

#width-selector{
    width: calc(100% - 50px);
    margin-left: 50px;
}

JS

const sliderToPercentageWidth = (sliderVal) => {
    return (50 + (containerWidth - 50) * (sliderVal/100) )
};

const rangeInput = document.getElementById("width-selector");
const graph = document.getElementById("graph");
const container = document.getElementById("container");
let containerWidth = container.offsetWidth;

// Match the slider width to graph on first render
const newWidth = sliderToPercentageWidth(rangeInput.value)
graph.style.width = `${newWidth}px`;

window.addEventListener("resize", (event) => {
    containerWidth = container.offsetWidth;
});

rangeInput.oninput = () => {
    const newWidth = sliderToPercentageWidth(rangeInput.value)
    graph.style.width = `${newWidth}px`;
};


// A basic chart
// Option for y axis width set

const ctx = document.getElementById("myChart");

new Chart(ctx, {
    type: "bar",
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
            {
                label: "# of Votes",
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                afterFit: function (scaleInstance) {
                    scaleInstance.width = 50; // sets the width to 50px
                }
            }
        }
    }
});

Old Incorrect Answer

You can use JS to track the value of the input slider and when it changes set the CSS styling of the graph.

Here is a quick example to get you started as I cannot see the exact code you are working with.

It has very basic HTML, CSS but uses the input value (the slider) to set the width of the "graph" div using .style.width.

<div class="container">
    <div id="graph"></div>
    <input id="width-selector" type="range" value="50">
</div>

.container{
    background-color: red;
    width: 50vw;
    height:70vh;
}

#graph{
    height: 50vh;
    /*  Set the default width to match the input slider value */
    width: 50%; 
    background-color:blue;
}

#width-selector{
    width: 100%;
}

const rangeInput = document.getElementById("width-selector");

const graph = document.getElementById("graph")

rangeInput.oninput = () => {
    graph.style.width = `${rangeInput.value}%`
}

If your current document is different to my example set up please share your code with us & I will look to update my example.