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.
A single call is enough to initialize all rangeinputs. The tool is smart enough to determine whether the slider is vertical or horizontal.
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.
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:
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.