<input type="number"> is great if we want to allow users to type in any number of their choosing. But, if we wanted to limit what numbers our users could type we might consider using a different
type value. Another option we could use is setting
"range" which creates a slider.
To set the minimum and maximum values of the slider we assign values to the
max attribute of the
<input>. We could also control how smooth and fluid the slider works by assigning the
step attribute a value. Smaller
step values will make the slider more fluidly, whereas larger
step values will make the slider move more noticeably. Take a look at the code to create a slider:
<form> <label for="volume"> Volume Control</label> <input id="volume" name="volume" type="range" min="0" max="100" step="1"> </form>
The code above renders:
In the example above, every time the slider moves by one, the value of the
value attribute changes.
This practice has two new elements and an attribute that you may not be familiar with.
<section>- An element used to represent a standalone section for which a more specific element can’t be found. This usually has a heading as a child element. A section should make sense in the outline of a document, whereas
<div>is used for styling. This is a semantic element you’ll learn more about in a later lesson.
class- A global attribute that has a list of classes pertaining to an element. You’ll see this used with
<section>in the practice.
<hr>- An element that is used to a break between paragraph-level elements. It is displayed as a horizontal line. This is also a semantic element that you’ll learn more about in a later lesson.
Let’s give our users an option for how they want to cook their patties. We can do this by adding a slider to the existing
class="cooked", add an
<input> element. Set the
"doneness". Also, set the
type attribute to
<form> is getting long, you might have to scroll down to find the provided
For the newly created
<input> set the: