I need to get the styles of the input range-slider in javascript so i can test it.

I have made a range slider component which accepts different style properties and adding those to the: input[type="range"]::-webkit-slider-runnable-track style.

And i want to test so the styles on input[type="range"]::-webkit-slider-runnable-track is the styles i pass down to the component. But i have not found any way to get the styles of the input[type="range"]::-webkit-slider-runnable-track.

A pseudo example to test this would be:

const el = document.querySelector('input[type="range"]')
expect(el).toHaveStyle("background-image": "the prop style")

The component looks like this:

       const Input = (props) => {
       return (
        <>
        <style>{generateStyles(props)}</style>
        <input
         data-testid="rangeSliderID"
         type="range" />
        </>
)}