Vertical Slider

Okaghana

Ok. I want to create a vertical Slider in p5. And so far I figured out 2 ways: -First there is the Slider function in the dom library. But this slider is horizontal. Is there a Way to rotate the Slider by 90°? -I tryed to create my own slider function. Here is the code:`

x=0

    function draw() {
VSlider(75,80,240,100,1,x);
    } 

    function VSlider(x, y, Lenght, Max, Steps,Value) {
textSize(20);
fill(150);
stroke(0);
strokeWeight(3);
rect(x-5, y, 10, Lenght, 5);

var valPos = map(Value, 0, 100, 100, 0)*(Lenght/Max)+x;
fill(0);
rect(x-12, valPos-5, 24, 10, 2);

if (mouseX < x+12 && mouseX > x-12 && mouseY > valPos-5 && mouseY < valPos-5 && mouseIsPressed){ 
    Value=map(mouseY, y, y+Lenght, 100, 0);
}

} ` And here is it on Pastebin

Im happy with the design of the slider, but im not able to move it up and down. Even if you remove the moving part and just say: "if mouse is in on the rectangle and mouse is clicked print true" just nothing happens

Sincerely Okaghana

GoToLoop

You can add a CSS transform "rotate" prop. to any p5.Element via its style() method: *-:)
https://p5js.org/reference/#/p5.Element/style

kfrajer

You have a bug in your last conditional. Last valPos should read valPos+5

I modified some of your code as a demonstration (and to find your bug) The new code is better as it doesn't rely on the mouse pointer to be on the slider button at all times for the slider to shift. Instead, it enables the slider when mouse is on top of the tab and disables it when the user releases the mouse button:

http://p5js.sketchpad.cc/FxN3uAQc0Q

Kf

Okaghana

kfraejer: thank you for the answere. it fixed the problem. it was probably the return part why it didnt worked before. I ofcourse had to improve it even further(like boundries on the upper and lower site), but that was no big deal.

GoToLoop: As you read, I stuck with the other method, but thank you for your ansewe anyways.