Texturing a geometry using WebGL shader

Question

I'm new to texturing and shading in WebGL. The problem is I want to color a sphere with a gradient color but when I use gl_FragColor = vec4(vUv, 0.0, 1.); There is a line on the surface .

After that, I use the position from the vertex shader gl_FragColor = vec4(vPosition, 1.); and get the result of 8 different colors which is not what I want.

I think the problem is the position from the vertex shader is not passing correctly. Is there any way to solve this?

Fragment:

varying vec2 vUv;
varying vec3 vPosition;

void main () {
  vUv = uv;
  vPosition = position;
  gl_FragColor = vec4(vUv, 0.0, 1.);
  gl_FragColor = vec4(vPosition, 1.);
}

Vertex:

varying vec2 vUv;
varying vec3 vPosition;

void main () {
  vUv = uv;
  vPosition = position;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
}

[Edit] After try gl_FragColor = vec4(abs(vUv.x*2.0-1.0), vUv.y, 0.0, 1.0);

from @Rabbid76 I got The peak at top and bottom