Snippets | Nomads | Projects | Applications

Nomads | Philosophy | Index

Nomads Web Code | KBSlider

KBSlider | KBSlider Vertical | Horizontal Code | VerticalCode


the KBSlider: code-based Range-Slider

using html, css, and js
demo uses php for css-variables

View the Code

This is a JavaScript based, fully CSS configurable, dynamic sizing range-slider.
The code injects itself into any div using the class="KBSlider" class name.
CSS then allows you to modify each slider individually based on the parent's ID.

Its best use is in applications that are already JavaScript based, since it requires JavaScript to work.

All code for this range-slider was written from scratch, so every aspect is exposed and configurable.
The User-Interface implements:

Available here are two simple demo packages - Horizontal and Vertical, using almost identical code.

for the Vertical Demo look here:
Web-KBSliderV


Example Implementation:

Dynamic Web-Audio Player

Here is a demonstration of the KBSlider, used twice in the same application, each with different CSS parameters applied.

Notice that you can use the mouse-wheel on a slider by just hovering!

Visit this page: dPlayer for more details and code.