{"id":2767,"date":"2020-02-17T00:37:26","date_gmt":"2020-02-17T00:37:26","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2767"},"modified":"2026-04-23T21:20:49","modified_gmt":"2026-04-23T21:20:49","slug":"homework-assignment-control-arc-with-a-slider","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/homework-assignment-control-arc-with-a-slider\/","title":{"rendered":"Homework 6: Control Arc with a slider"},"content":{"rendered":"\n<p>In this assignment, you&#8217;ll use the Hacking with Swift website to learn how sliders work in SwiftUI, then apply that knowledge to build two interactive drawing exercises.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Begin<\/h2>\n\n\n\n<p>Read through the <a href=\"https:\/\/www.hackingwithswift.com\/quick-start\/swiftui\/how-to-create-a-slider-and-read-values-from-it\">Hacking with Swift slider lesson<\/a> and study the code sample. Understanding how to create a slider and read its value is the foundation for both parts below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Part 1: Arc with a Slider<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>Create an <strong>arc shape<\/strong> and a <strong>slider<\/strong> that controls the arc&#8217;s size. As you slide in one direction, the arc should grow; in the other, it should shrink.<\/li>\n<li>Add a <strong>text field<\/strong> that displays the current value of the slider.<\/li>\n<li><strong>Extra challenge:<\/strong> Display the value as a whole number rather than a decimal. Hint: wrap the slider value in <code>Int()<\/code> to convert it from a <code>Double<\/code> to an integer before displaying it.<\/li><\/ol>\n\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Part 1 Demo<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"640\" style=\"aspect-ratio: 332 \/ 640;\" width=\"332\" controls aria-label=\"SwiftUI simulator demo: a horizontal slider controls the sweep angle of an arc shape drawn on screen\" src=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2020\/09\/slider.mp4\"><\/video><\/figure>\n\n\n\n<p><em>Video: A screen recording of the iOS Simulator showing a slider and an arc shape. Dragging the slider left or right increases or decreases the arc&#8217;s sweep angle in real time.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2: Progress Indicator<\/h2>\n\n\n\n<p>Now that you&#8217;ve built an arc controlled by a slider, create a new SwiftUI file and build a <strong>progress indicator<\/strong> that&#8217;s also controlled by a slider.<\/p>\n\n\n\n<p>Hint: Reuse your arc code from the textbook as a starting point for the progress indicator shape.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2 Demo<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1802\" style=\"aspect-ratio: 930 \/ 1802;\" width=\"930\" controls aria-label=\"SwiftUI simulator demo: a slider controls a circular progress indicator ring\" src=\"https:\/\/nmi.cool\/appdev\/wp-content\/uploads\/sites\/17\/2022\/09\/homework6_bonus.mp4\"><\/video><\/figure>\n\n\n\n<p><em>Video: A screen recording of the iOS Simulator showing a circular progress indicator ring and a slider. As the slider value changes, the ring fills proportionally to represent the current progress.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this assignment, you&#8217;ll use the Hacking with Swift website to learn how sliders work in SwiftUI, then apply that knowledge to build two interactive drawing exercises. Before You Begin Read through the Hacking with Swift slider lesson and study the code sample. Understanding how to create a slider and read its value is the &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/homework-assignment-control-arc-with-a-slider\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Homework 6: Control Arc with a slider<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2767","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=2767"}],"version-history":[{"count":22,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2767\/revisions"}],"predecessor-version":[{"id":4275,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2767\/revisions\/4275"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}