HTML and CSS Reference
In-Depth Information
To add descriptive labels to the range slider:
1. Return to the survey.htm file in your text editor.
2. Directly before the input element for the service range slider, insert the following
label element:
<label class=”sliderLabel”>0</label>
3. Directly after the input element for the service range slider, insert the following
label element:
<label class=”sliderLabel”>10</label>
4. Repeat Steps 2 and 3 for the input element for the food quality range slider.
Figure 6-58 highlights the revised code.
figure 6-58
adding descriptive labels to the range slider
Next, you have to create a style rule for these new labels so that they appear
alongside the range sliders. You also have to resize the labels and the sliders to
make them fit within the width of the field set.
5. Go to the forms.css file in your text editor. At the bottom of the file, insert the fol-
lowing style rules as shown in Figure 6-59. Note that you have to specifically not
clear the label text so that it floats alongside the other objects within that line on
the form.
/* Range slider styles */
label.sliderLabel {
clear: none;
font-size: 0.7em;
margin: 10px 0px;
text-align: center;
width: 10px
}
input[type=”range”] {
width: 150px;
}
 
Search WWH ::




Custom Search