Color react-input-slider from middle instead of left

I have a Slider that represents motor trim ranging from 0 to 100. Currently it fills in blue on a grey background from the left (value of 0).

I want it to fill in blue from the middle (50) outwards in the direction of the thumb. What CSS can I use to achieve this functionality?

 <Slider
                                axis="x"
                                xstep={1}
                                xmin={0}
                                xmax={100}
                                x={xval}
                                onChange={onChangefun}
                             />

I have tried the following but it doesn't work, it instead causes an adjacent image in another column to partially overlap

.rangeslider__fill {
top: 0;
left: 50%;
height: 100%;

}

I have also tried to alter the styles prop but cannot find the relevant attribute to change. Thanks!