top of page

A slider widget... from scratch???

Updated: Sep 30, 2021

Code a slider widget from scratch. It’s okay to ignore the changing color of the slider track, but in general feel free to use color and change the size of everything!

HINT: the dist( ) and constrain( ) functions will help. No cheating. :)


Step 1. set up the canvas. Sliders are generally small, and longer than they are tall (or vice versa)


Step 2: Set up the slider bar and the dot.


Okay, I got to the point where I want to click the dot to move, but now I'm stuck because I want the dot to always be visible, not just when mouseIsPressed.




Okay, I figured out how to move the dot with the mouse, but now I need to figure out how to make it stay at the mouse position when the cursor is released...




See the sketch here

23 views1 comment

Recent Posts

See All
bottom of page