HTML and CSS Reference
In-Depth Information
Adding a Range Control
You already included a range control using a custom editor template. Now you'll insert another one by simply
adding the appropriate HTML markup. And just for fun, you'll make this a vertical slider by adjusting the width
and height styles. To do this, add the code in bold from Listing 3-9 to the feedback form.
Listing 3-9.
Adding a range control in HTML
<fieldset>
. . .
<div>
@Html.LabelFor(m => m.Satisfaction)
</div>
<div>
@Html.EditorFor(m => m.Satisfaction)
</div>
<div>
Custom range
<input type="range" id="CustomRange" name="CustomRange"
class="range" style="width: 50px; height: 200px"
min="0" max="200" step="20" />
</div>
<p>
<input type="submit" value="Submit" />
</p>
</fieldset>
Save your changes and press F5 to debug. The form should look like Figure
3-18
.
■
The value of this control is not part of the model and will not be saved with the form. This is appropriate if
the control is used solely to aid the user experience and does not need to be persisted. For example, it could control
the volume of a video or audio clip.
Note
