Snippets | Nomads | Projects | Applications

Nomads | Philosophy | Index

KBSlider | KBSlider Vertical | Horizontal Code | Vertical Code

Web-Code


the KBSlider code based Range-Slider

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

by Kirk Siqveland
© 2022 CC-BY-NC-SA 4.0

View the Code

This is a 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.

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.