Basically I want the circle to invert color when the slider moves it across the flag (green when on white background, white when on green rect).
function move() {
let slider = document.querySelector("#slider");
let circle = document.querySelector("#player");
circle.setAttribute("cx", slider.value);
}<h1>Flag</h1>
<svg width="375" height="375">
<g id="flag">
<rect x="0" y="0" width="125" height="375" fill="green"/>
<rect x="250" y="0" width="125" height="375" fill="green"/>
</g>
<circle id="player" cx="187.5" cy="187.5" r="10" fill="green" />
</svg><br>
<input id="slider" type="range" min="0" max="375" value="150" style="width:370px" oninput="move()">There isn't an easy way to do this with SVG filters or blend modes, etc. You probably have to just do the switch yourself. See below.
function move() {
let slider = document.querySelector("#slider");
let circle = document.querySelector("#player");
circle.setAttribute("cx", slider.value);
circle.setAttribute('fill', (slider.value >= 125 && slider.value < 250) ? 'green' : 'white');
}<h1>Flag</h1>
<svg width="375" height="375">
<g id="flag">
<rect x="0" y="0" width="125" height="375" fill="green"/>
<rect x="250" y="0" width="125" height="375" fill="green"/>
</g>
<circle id="player" cx="187.5" cy="187.5" r="10" fill="green"/>
</svg><br>
<input id="slider" type="range" min="0" max="375" value="150" style="width:370px" oninput="move()">