Replace / switch slider1.value () with slider2.value () within a variable in the code and within the position on the canvas

I would like to replace / toggle the slider that gives value to a variable within an object. The slider2 should replace and occupy within the code and also on the canvas the place that previously occupied the slider1, and vice versa. Let's suppose:

var slider1;
var slider2;

function setup() {
createCanvas (windowWidth, windowHeight);

slider1 = createSlider(0, 255, 125);
slider1.position(100, 100);

slider2 = createSlider(0, 500, 125);
slider2.position(100, 100);
}

function draw(){
background(0);  
translate(width/2, height/2);

stroke(255);
strokeWeight(5);
noFill();
ellipse(50, 50, slider1.value(), slider1.value());
}

I would like, when triggering something like a keyPressed function or something, replace the "slider1.value ()" with the "slider2.value ()", there in the ellipse.

Another problem is to position the slider inside the canvas.

At the same time that I would like to replace slider.value (), I also need to replace "slider1.position" with "slider2.position", since one will take the place of the other on the canvas.

I tried to do something like create a keyPressed function after the function draw, as follows:

var slider1;
var slider2;
var value;

function setup() {
createCanvas (windowWidth, windowHeight);

slider1 = createSlider(0, 500, 100);
slider2 = createSlider(0, 300, 100); 
}

function draw() {

background(150);
translate(width/2, height/2);

value = slider1.value();
stroke(255);
noFill();
strokeWeight(2);
ellipse(0, 0, value, value);

}   

function keyPressed(){

if (keyCode == DOWN_ARROW) {
value = slider2.value();
slider2.position(100, 100);

} else {

value = slider1.value();
slider1.position(100, 100);
}
}

But it did not work, because if the slider was not created already in the setup, it initially appears outside the canvas, which does not interest me, because in reality the composition is more complex with several elements and buttons.

And another problem derived from this is that by the end, the two sliders overlap. I would like one to disappear for the other to appear and vice versa.

A workaround not to overlap the sliders was, under the condition, to throw either one off the screen:

var slider1;
var slider2;  
var value = 50;

function setup() {
createCanvas (windowWidth, windowHeight);

slider1 = createSlider(0, 500, 100);
slider1.position(100, 100);

slider2 = createSlider(0, 50, 50);
slider2.position(-300, 100); 
}

function draw() {
background(150);
translate(width/2, height/2);

stroke(255);
noFill();
strokeWeight(2);
ellipse(0, 0, value, value);
}

function keyPressed(){

if (keyCode == 'DOWN_ARROW') {

value = slider2.value();
slider2.position(100, 100);
slider1.position(-300, 100);

} else {

value = slider1.value();
slider2.position(-300, 100);
slider1.position(100, 100);
}
}

In any case, it is not responding as expected.

I hope I have been clear enough. Thank you for your attention. Abs and happy new year!