# HELP : can´t remove sliders from home page

**URL:** <https://discourse.processing.org/t/help-can-t-remove-sliders-from-home-page/31072>\
**Category:** Coding Questions\
**Created:** [July 5, 2021, 2:35pm UTC](https://discourse.processing.org/t/help-can-t-remove-sliders-from-home-page/31072 "2021-07-05T14:35:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![axelen](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@axelen](https://discourse.processing.org/u/axelen)\
**Post date:** [July 5, 2021, 2:35pm UTC](https://discourse.processing.org/t/help-can-t-remove-sliders-from-home-page/31072/1 "2021-07-05T14:35:55Z")

</div>

**I can’t remove sliders from the home page. They should only be visible and working when you press “Start Mixing”. Help please!! Thanks!**

let myFont

let relleno

let data

let r

let b

let g

let ariana

let billie

let dualipa

let justin

let taylor

let tini

let bot1 = false

let bot2 = false

let bot3 = false

let bot4 = false

let bot5 = false

let bot6 = false

let ari = false

let bil = false

let dua = false

let jus = false

let tay = false

let ti = false

let cddua

let cdari

let cdbil

let cdjus

let cdtay

let cdtin

let rot = 0

let comienzo = false

let myColors = ["#b0919f", “#efd284”, “#7fb5db”, “#63c195”, “#ccb29d”, “#173861”];

let randCol

let sliderRate

let sliderPan

let fft

function preload(){

//Sonidos y canciones

sonido1 = loadSound(‘sonidos/sonido1.mp3’)

sonido2 = loadSound(“sonidos/sonido2.mp3”)

sonido3 = loadSound(“sonidos/sonido3.mp3”)

sonido4 = loadSound(“sonidos/sonido4.mp3”)

sonido5 = loadSound(“sonidos/sonido5.mp3”)

sonido6 = loadSound(“sonidos/sonido6.mp3”)

songariana = loadSound(“sonidos/ariana.mp3”)

songbillie = loadSound(“sonidos/billie.mp3”)

songdua = loadSound(“sonidos/dua.mp3”)

songjustin = loadSound(“sonidos/justin.mp3”)

songtaylor = loadSound(“sonidos/taylor.mp3”)

songtini = loadSound(“sonidos/TINI.mp3”)

//Imágenes

ariana = loadImage(‘discos/ariana.jpg’)

billie = loadImage(‘discos/billie.png’)

dualipa = loadImage(‘discos/dualipa.jpg’)

justin = loadImage(‘discos/justin.jpg’)

taylor = loadImage(‘discos/taylor.jpg’)

tini = loadImage(‘discos/tini.jpg’)

cddua = loadImage (‘cd/duacd.png’)

cdari = loadImage (‘cd/arianacd.png’)

cdbil = loadImage (‘cd/billiecd.png’)

cdjus = loadImage (‘cd/justincd.png’)

cdtay = loadImage (‘cd/taylorcd.png’)

cdtin = loadImage (‘cd/tinicd.png’)

myFont = loadFont(‘tipografia/BebasNeue-Regular.ttf’)

}

function setup() {

createCanvas(1500, 700);

frameRate(40)

w = width/150

fft = new p5.FFT();

fft.setInput(sonido1);

fft.setInput(sonido2);

fft.setInput(sonido3);

fft.setInput(sonido4);

fft.setInput(sonido5);

fft.setInput(sonido6);

fft.setInput(songariana);

fft.setInput(songbillie);

fft.setInput(songdua);

fft.setInput(songjustin);

fft.setInput(songtaylor);

fft.setInput(songtini);

pixelDensity(1)

slide()

}

function draw() {

if (comienzo == false){

```
portada()

```

}

if (comienzo == true){

```
background(0);

frecuencia()

dj()

arriba((mouseX > width/20 && mouseY > height/15 && mouseX < width/20 + 220 && mouseY < height/10 + 220),176,145, 159,cdari,width/6.2, height/5.15)

arriba((mouseX > width/20 && mouseY > height/2.7 && mouseX < width/20 + 220 && mouseY < height/2.5 + 220),239,210, 132,cdbil,width/6.2, height/2)

arriba((mouseX > width/20 && mouseY > height/1.47 && mouseX < width/20 + 220 && mouseY < height/1.4 + 220),127,181, 219,cddua,width/6.2, height/1.24)

arriba((mouseX > width/1.2 && mouseY > height/15 && mouseX < width/1.2 + 220 && mouseY < height/10 + 220),99,193, 149,cdjus,width/1.2, height/5.15)

arriba((mouseX > width/1.2 && mouseY > height/2.7 && mouseX < width/1.2 + 220 && mouseY < height/2.5 + 220),204,178, 157,cdtay,width/1.2, height/2)

arriba((mouseX > width/1.2 && mouseY > height/1.47 && mouseX < width/1.2 + 220 && mouseY < height/1.4 + 220),26,53, 97,cdtin,width/1.2, height/1.24)

```

//imágenes tapas

```
tapas(ariana, 20, 15)

tapas(billie, 20, 2.7)

tapas(dualipa,20, 1.47)

tapas(justin, 1.2, 15)

tapas(taylor, 1.2, 2.7)

tapas(tini, 1.2, 1.47)

```

//botones azules

```
botonazul(bot1, 3, 2)

botonazul(bot2, 2.25, 2)

botonazul(bot3, 1.8, 2)

botonazul(bot4, 3, 1.5)

botonazul(bot5, 2.25, 1.5)

botonazul(bot6, 1.8, 1.5)

```

//CD MEDIO

```
cdmedio(ari, 176, 145, 159, 2.5, cdari) 

cdmedio(bil,239,210,132,2.5, cdbil)

cdmedio(dua, 127, 181, 219, 2.5, cddua)

cdmedio(jus, 99, 193, 149, 1.75, cdjus)

cdmedio(tay, 204, 178, 157, 1.75, cdtay)

cdmedio(ti, 26, 53, 97, 1.75, cdtin)

//slider disco 1 volumen

songariana.setVolume(slider.value());

songbillie.setVolume(slider.value());

songdua.setVolume(slider.value());

```

//slider disco 1 velocidad

```
songariana.rate(sliderRate.value());

songbillie.rate(sliderRate.value());

songdua.rate(sliderRate.value());

//slider disco 2 volumen

songjustin.setVolume(slider2.value());

songtaylor.setVolume(slider2.value());

songtini.setVolume(slider2.value());

```

//slider disco 2 velocidad

```
songjustin.rate(sliderRate1.value());

songtaylor.rate(sliderRate1.value());

songtini.rate(sliderRate1.value());

```

//sliders botones volumen y velocidad

```
sonido1.setVolume(slider3.value())

sonido1.rate(sliderRate3.value())

sonido2.setVolume(slider4.value())

sonido2.rate(sliderRate4.value())

sonido3.setVolume(slider5.value())

sonido3.rate(sliderRate5.value())

sonido4.setVolume(slider6.value())

sonido4.rate(sliderRate6.value())

sonido5.setVolume(slider7.value())

sonido5.rate(sliderRate7.value())

sonido6.setVolume(slider8.value())

sonido6.rate(sliderRate8.value())

//sliders botones velocidad

tocadisco()

replay()

```

}

}

function botonazul(a, b, c) {

if (a == true) {

```
fill(0,0,255)

noStroke()

rect(width/b, height/c, width/11, height/11, 10, 10, 10, 10)

```

}

}

function cdmedio(a, r, g, b, c, img) {

if (a == true) {

```
push()

noStroke()

fill(r,g,b)

ellipse(width/c, height/3, width/9)

translate(width/c, height/3);

rotate(rot);

imageMode(CENTER)

image(img, 0, 0, 180, 180)

imageMode(CORNER)

fill(0)

stroke(220)

strokeWeight(5)

ellipse(0, 0, width/50)

fill(153,4,4)

noStroke()

ellipse(0, 0, width/55)

fill(10)

ellipse(0, 0, width/85)

fill(185)

ellipse(0, 0, width/200)

rot = rot + 0.01

pop()

```

}

}

function arriba (condi, r, g, b, cd, x, y){

if (condi){

```
fill(r, g, b)

```

ellipse(x, y, width/9)

fill(0)

stroke(220)

ellipse(x, y, width/50)

imageMode(CENTER)

image(cd, x, y, 180, 180)

imageMode(CORNER)

}

}

//Interacciones con botones y discos

function mouseClicked(){

//boton 1

if(mouseX \> width/3 && mouseY \> height/2 && mouseX \< width/3 + width/11 && mouseY \< height/2 + height/11&& comienzo==true){

```
if (bot1 == false){

  bot1 = true

  sonido1.loop()

}

else{

  bot1 = false

  sonido1.stop()

}

```

}

//boton 2

if(mouseX \> width/2.25 && mouseY \> height/2 && mouseX \< width/2.25 + width/11 && mouseY \< height/2 + height/11 && comienzo==true){

```
if (bot2 == false){

  bot2 = true

  sonido2.loop()

}

else{

  bot2 = false

  sonido2.stop()

}

```

}

//boton 3

if(mouseX \> width/1.8 && mouseY \> height/2 && mouseX \< width/1.8 + width/11 && mouseY \< height/2 + height/11&& comienzo==true){

```
if (bot3 == false){

  bot3 = true

  sonido3.loop()

}

else{

  bot3 = false

  sonido3.stop()

}

```

}

//boton 4

if(mouseX \> width/3 && mouseY \> height/1.5 && mouseX \< width/3 + width/11 && mouseY \< height/1.5 + height/11&& comienzo==true){

```
if (bot4 == false){

  bot4 = true

  sonido4.loop()

}

else{

  bot4 = false

  sonido4.stop()

}

```

}

//boton 5

if(mouseX \> width/2.25 && mouseY \> height/1.5 && mouseX \< width/2.25 + width/11 && mouseY \< height/1.5 + height/11&& comienzo==true){

```
if (bot5 == false){

  bot5 = true

  sonido5.loop()

}

else{

  bot5 = false

  sonido5.stop()

}

```

}

//boton 6

if(mouseX \> width/1.8 && mouseY \> height/1.5 && mouseX \< width/1.8 + width/11 && mouseY \< height/1.5 + height/11&& comienzo==true){

```
if (bot6 == false){

  bot6 = true

  sonido6.loop()

}

else{

  bot6 = false

  sonido6.stop()

}

```

}

//una canción a la vez

if(mouseX \> width/20 && mouseY \> height/10 && mouseX \< width/20 + 220 && mouseY \< height/10 + 220&& comienzo==true){

```
if (ari == false){

  ari = true

  bil = false

  dua = false

  songariana.loop()

  songbillie.stop()

  songdua.stop()

}

else{

  ari = false

  songariana.stop()

}

```

}

if(mouseX \> width/20 && mouseY \> height/2.5 && mouseX \< width/20 + 220 && mouseY \< height/2.5 + 220&& comienzo==true){

```
if (bil == false){

  bil = true

  ari = false

  dua = false

  songbillie.loop()

  songdua.stop()

  songariana.stop()

}

else{

  bil = false

  songbillie.stop()

}

```

}

if(mouseX \> width/20 && mouseY \> height/1.4 && mouseX \< width/20 + 220 && mouseY \< height/1.4 + 220&& comienzo==true){

```
if (dua == false){

  dua = true

  ari = false

  bil = false

  songdua.loop()

  songariana.stop()

  songbillie.stop()

}

else{

  dua = false

  songdua.stop()

}

```

}

if(mouseX \> width/1.2 && mouseY \> height/10 && mouseX \< width/1.2 + 220 && mouseY \< height/10 + 220&& comienzo==true){

```
if (jus == false){

  jus = true

  tay = false

  ti = false

  songjustin.loop()

  songtaylor.stop()

  songtini.stop()

}

else{

  jus = false

  songjustin.stop()

}

```

}

if(mouseX \> width/1.2 && mouseY \> height/2.5 && mouseX \< width/1.2 + 220 && mouseY \< height/2.5 + 220&& comienzo==true){

```
if (tay == false){

  tay = true

  ti = false

  jus = false 

  songtaylor.loop()

  songjustin.stop()

  songtini.stop()

}

else{

  tay = false

  songtaylor.stop()

}

```

}

if(mouseX \> width/1.2 && mouseY \> height/1.4 && mouseX \< width/1.2 + 220 && mouseY \< height/1.4 + 220&& comienzo==true){

```
if (ti == false){

  ti = true

  jus = false

  tay = false

  songtini.loop()

  songtaylor.stop()

  songjustin.stop()

}

else{

  ti = false

  songtini.stop()

}

```

}

if(mouseX\>width/2.32 && mouseY\>height/1.8 && mouseX\<width/2.32+200 && mouseY\<height/1.8+50){

```
comienzo = true

```

}

if(mouseX\>width/2.25 && mouseY\>height/1.15 && mouseX\<width/2.25+150 && mouseY\<height/1.15+50){

```
comienzo = false

bot1 = false

sonido1.stop()

bot2 = false

sonido2.stop()

bot3 = false

sonido3.stop()

bot4 = false

sonido4.stop()

bot5 = false

sonido5.stop()

bot6 = false

sonido6.stop()

ari = false

songariana.stop()

bil = false

songbillie.stop()

dua = false

songdua.stop()

jus = false

songjustin.stop()

tay = false

songtaylor.stop()

ti = false

songtini.stop()

```

}

}

//figuras

function dj (){

//discos

noStroke()

strokeWeight(2)

fill(185)

rect(width/3.5, height/6, width/2.5, height/1.5, 20, 20, 20, 20)

fill(30)

ellipse(width/2.5, height/3, width/9)

ellipse(width/1.75, height/3, width/9)

stroke(10)

noFill()

ellipse(width/2.5, height/3, width/11)

ellipse(width/1.75, height/3, width/11)

ellipse(width/2.5, height/3, width/14)

ellipse(width/1.75, height/3, width/14)

ellipse(width/2.5, height/3, width/20)

ellipse(width/1.75, height/3, width/20)

fill(10)

ellipse(width/2.5, height/3, width/25)

ellipse(width/1.75, height/3, width/25)

fill(153,4,4)

noStroke()

ellipse(width/2.5, height/3, width/29)

ellipse(width/1.75, height/3, width/29)

fill(10)

ellipse(width/2.5, height/3, width/85)

ellipse(width/1.75, height/3, width/85)

fill(185)

ellipse(width/2.5, height/3, width/200)

ellipse(width/1.75, height/3, width/200)

//botones

fill(30)

rect(width/3, height/2, width/11, height/11, 10, 10, 10, 10)

rect(width/3, height/1.5, width/11, height/11, 10, 10, 10, 10)

rect(width/2.25, height/2, width/11, height/11, 10, 10, 10, 10)

rect(width/2.25, height/1.5, width/11, height/11, 10, 10, 10, 10)

rect(width/1.8, height/2, width/11, height/11, 10, 10, 10, 10)

rect(width/1.8, height/1.5, width/11, height/11, 10, 10, 10, 10)

}

//Figura tocadisco

function tocadisco(){

strokeWeight(5)

stroke(220)

strokeCap(ROUND)

line(width/2.1, height/4.1, width/2.2, height/3)

line(width/2.2, height/3, width/2.34, height/2.8)

line(width/2, height/4.1, width/1.94, height/3)

line(width/1.94, height/3, width/1.85, height/2.8)

stroke(10)

strokeWeight(8)

strokeCap(SQUARE)

line(width/2.1, height/4.15, width/2.12, height/3.8)

line(width/2.34, height/2.8, width/2.38, height/2.75)

line(width/2, height/4.15, width/1.99, height/3.8)

line(width/1.85, height/2.8, width/1.83, height/2.75)

}

function slide(){

//slider disco 1

slider = createSlider(0,1,0.5,0.01);

slider.position(width/3.65,height/3.2);

slider.style(“transform”,“rotate(-90deg)”);

```
//velocidad

```

sliderRate = createSlider(0,2,1,0.01);

sliderRate.position(width/3.45,height/3.2);

sliderRate.style(“transform”,“rotate(-90deg)”);

//slider disco 2

slider2 = createSlider(0,1,0.5,0.01);

slider2.position(width/1.65,height/3.2);

slider2.style(“transform”,“rotate(-90deg)”);

//velocidad

sliderRate1 = createSlider(0,2,1,0.01);

sliderRate1.position(width/1.60,height/3.2);

sliderRate1.style(“transform”,“rotate(-90deg)”);

//slider botón 1

slider3 = createSlider(0,1,0.5,0.01);

slider3.position(width/2.99,height/1.68);

sliderRate3 = createSlider(0,2,1,0.01);

sliderRate3.position(width/2.99,height/1.60);

//slider botón 2

slider4 = createSlider(0,1,0.5,0.01);

slider4.position(width/2.24,height/1.68);

sliderRate4 = createSlider(0,2,1,0.01);

sliderRate4.position(width/2.24,height/1.60);

//slider botón 3

slider5 = createSlider(0,1,0.5,0.01);

slider5.position(width/1.79,height/1.68);

sliderRate5 = createSlider(0,2,1,0.01);

sliderRate5.position(width/1.79,height/1.60);

//slider botón 4

slider6 = createSlider(0,1,0.5,0.01);

slider6.position(width/2.99,height/1.31);

sliderRate6 = createSlider(0,2,1,0.01);

sliderRate6.position(width/2.99,height/1.265);

//slider botón 5

slider7 = createSlider(0,1,0.5,0.01);

slider7.position(width/2.24,height/1.31);

```
sliderRate7 = createSlider(0,2,1,0.01);

```

sliderRate7.position(width/2.24,height/1.265);

//slider botón 6

slider8 = createSlider(0,1,0.5,0.01);

slider8.position(width/1.79,height/1.31);

sliderRate8 = createSlider(0,2,1,0.01);

sliderRate8.position(width/1.79,height/1.265);

}

//Imágenes de las tapas LISTOOOOO

function tapas(art, x, y){

image(art, width/x, height/y, 180, 180)

}

//Figuras de los CD´s LISTOOOOO

function discos(r, g, b, a, b){

noStroke()

fill(r, g, b)

ellipse(width/a, height/b, width/9)

fill(0)

stroke(220)

ellipse(width/a, height/b, widht/50)

discos(176, 145, 159, 6.2, 4.7)

discos(239, 210, 132, 6.2, 1.94)

discos(127, 181, 219, 6.2, 1.21)

discos(99, 193, 149, 1.2, 4.71)

discos(204, 178, 157, 1.2, 1.94)

discos(26, 53, 97, 1.2, 1.208)

}

function discportada(x,y){

noStroke()

strokeWeight(2)

fill(30)

ellipse(x, y, width/11)

stroke(10)

noFill()

ellipse(x, y, width/14)

ellipse(x, y, width/20)

ellipse(x, y, width/28)

fill(10)

ellipse(x, y, width/35)

fill(153,4,4)

noStroke()

ellipse(x, y, width/50)

fill(10)

ellipse(x, y, width/200)

fill(185)

ellipse(x, y, width/285)

noFill()

if (mouseX \> x - (width / 11) / 2 && mouseY \> y - (width / 11) / 2 && mouseX \< x + (width / 11) / 2 && mouseY \< y + (width / 11) / 2) {

```
randCol = randomSeed(myColors.length);

randCol = floor(randCol);

    fill(randCol);

    ellipse(x, y, width/11)

    stroke(10)

    noFill()

    ellipse(x, y, width/14)

    ellipse(x, y, width/20)

    ellipse(x, y, width/28)

    fill(10)

    ellipse(x, y, width/35)

    fill(153,4,4)

    noStroke()

    ellipse(x, y, width/50)

    fill(10)

    ellipse(x, y, width/200)

    fill(185)

    ellipse(x, y, width/285)

    noFill()

```

}

}

function portada(){

background(200);

textFont(myFont)

noStroke()

fill(30)

textSize(100)

text(“DJ CONSOLE”, width/2.55, height/2.2)

fill(153,4,4)

rect(width/2.25, height/1.8, 200, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text(“START MIXING”, width/2.13, height/1.65)

if(mouseX\>width/2.25 && mouseY\>height/1.8 && mouseX\<width/2.25+200 && mouseY\<height/1.8+50){

```
fill(110,20,20)

rect(width/2.25, height/1.8, 200, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text("START MIXING", width/2.13, height/1.65)  

```

}

discportada(150,100)

discportada(350,100)

discportada(550,100)

discportada(750,100)

discportada(950,100)

discportada(1150,100)

discportada(1350,100)

discportada(150,260)

discportada(350,260)

discportada(1150,260)

discportada(1350,260)

discportada(150,440)

discportada(350,440)

discportada(1150,440)

discportada(1350,440)

discportada(150,600)

discportada(350,600)

discportada(550,600)

discportada(750,600)

discportada(950,600)

discportada(1150,600)

discportada(1350,600)

}

function replay(){

noStroke()

fill(153,4,4)

rect(width/2.25, height/1.15, 150, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text(“REPLAY”, width/2.12, height/1.085)

if (mouseX\>width/2.25 && mouseY\>height/1.15 && mouseX\<width/2.25+150 && mouseY\<height/1.15+50){

```
noStroke()

fill(110,20,20)

rect(width/2.25, height/1.15, 150, 50, 5, 5, 5, 5)

textFont(myFont)

noStroke()

fill(255)

textSize(30)

text("REPLAY", width/2.12, height/1.085)

```

}

}

function frecuencia() {

let spectrum = fft.analyze();

noStroke()

fill(100,20,20)

for (i = 0; i \< spectrum.length; i++) {

```
colorMode(HSB, 176,145,159)

let amp = spectrum[i];

let y = map(amp, 0, 256, height, 0);

fill(i,53,97)

rect (i*w, y, w - 5, height - y)

colorMode(RGB)

```

}

}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [July 7, 2021, 2:12pm UTC](https://discourse.processing.org/t/help-can-t-remove-sliders-from-home-page/31072/2 "2021-07-07T14:12:06Z")

</div>

Hi @axelen ,

Welcome to the community! 😉

When you post some code in the forum, please format it by using the `</>` button in the message editor or use triple backticks around your code like this : ```code``` → `code`

_(You can edit your previous message for that)_

Also in order for us to help, posting your whole code is not really helpful, you should either provide a link to your code or use the [p5 web editor](https://editor.p5js.org/) to share your sketch and assets (fonts and sounds).

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 7, 2021, 8:04pm UTC](https://discourse.processing.org/t/help-can-t-remove-sliders-from-home-page/31072/3 "2021-07-07T20:04:29Z")

</div>

Second everything josephh said, additionally it can be helpful to post a reduced example of what you are trying to do or what you are having issues with. Since you are having issues with sliders and removing them you could post a minimal example that shows how you are creating the slider and a where you are trying to remove it.

That said, despite your code being impossible to read I don’t see any calls to [`remove()`](https://p5js.org/reference/#/p5.Element/remove) on the `p5.Element` returned by `createSlider()`. So you might want to look into that.