Sliders • tim rodenbröker creative coding

Sliders

Courses / Building Tools / Sliders

Range sliders are the most simple UI elements and can be used to change numerical values.

index.html

<head></head>

<body>
    <input type="range" id="slider" value="250" min="0" max="500">

    <div id="canvasWrapper"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js"></script>
    <script src="./sketch.js"></script>

</body>

sketch.js

var slider = document.getElementById("slider");

function setup() {
	var c = createCanvas(500,500);
	c.parent("canvasWrapper");
}

function draw()  {
	background("#aaaaaa");
	noStroke();
	fill("#0000ff");	
	circle(width/2,height/2,slider.value);
}

Demo

Published by Tim on Wednesday April 24, 2024

Last modified on October 24th, 2024 at 9:51

← Intro

Text input →
  1. Intro
  2. Sliders
  3. Text input
  4. Buttons
  5. Number Input
  6. Color Picker
  7. Select
  8. Checkboxes
  9. Labels
  10. Text Area
  11. Application Layout
  12. Styling the UI Elements (Part 1)
  13. Styling the UI Elements (Part 2)
  14. File Upload
  15. Group UI Components with Accordions
  16. Template Collection
  17. Example – Book Cover Generator
  18. Example – Coding Systems Announcement Machine
  19. Wrapping Up