Multiple small ranges
Rangeinput demo 3 / 4 : Multiple small ranges
These ranges are initialized with a single $(":range").rangeinput() call. Ranges on the second column are readonly and ranges on the third column are disabled.
You can click on the values and edit them.
Rangeinput initialization
A single call is enough to initialize all rangeinputs. The tool is smart enough to determine whether the slider is vertical or horizontal.
$(":range").rangeinput({ precision: 1, value: 50.5 });HTML coding
We have grouped the inputs inside fieldset elements. Inputs on the second column are readonly, meaning that you can change the value from the slider but not from the input field. The disabled slider cannot be changed at all. You can toggle readonly and disabled attributes with scripting using jQuery's attr method.
<fieldset>
<input type="range" readonly />
<input type="range" readonly />
<input type="range" readonly />
<input type="range" readonly />
<input type="range" readonly />
</fieldset>
<fieldset class="vertical">
<input type="range" disabled />
<input type="range" disabled />
<input type="range" disabled />
<input type="range" disabled />
<input type="range" disabled />
</fieldset>CSS coding
This skin is image based. Both the slider and the drag handle have a background image. Here are the most crucial parts of the CSS file:
/* slider root */
.slider {
background:url(rangeinput.png) no-repeat 0 -5px;
width:94px;
height:5px;
cursor:pointer;
position: relative;
float:left;
}
/* drag handle */
.handle {
background:transparent url(rangeinput.png) no-repeat scroll -97px 0;
height:13px;
position:absolute;
top:-5px;
width:12px;
cursor:move;
}You need to place the script block after the HTML code or you can alternatively use jQuery's $(document).ready to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the User's Manual.
