Snippets | Nomads | Projects | Applications
Nomads | Philosophy | Index
KBSlider | KBSlider Vertical | Horizontal Code | Vertical Code
KBSlider Horizontal Range-Slider Source
view the Source for Vertical Range Slider
Here are the two source files - JS and CSS, and a simple HTML demo page
The Demo HTML File
We just added the script at the bottom of the page and a single div where we want the slider:
<div class="volume KBSlider" button="display" ></div>
KBSlider DEMO HTML Page SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link type="text/css" href="KBSlider.css.php" rel="stylesheet" />
</head>
<body>
<div class="centerme">
<div id="feedback"> 0%</div>
<div class="volume KBSlider" button="display" ></div> <!-- use button="display" or button="none" -->
<br/><br/>
<main>
<form><!-- This is a sample of a simple input form -->
<div>
<label for= "progress">Progress:</label>
<input name="progress" id="SlideInput" type="text" placeholder="0"/>
</div>
<button type="button" id="submit">set progress</button>
</form>
</main>
</div>
<script type="text/javascript" src ="KBSlider.js"></script>
</body>
</html>
the JavaScript Source
KBSlider JS SOURCE CODE:
/**********************************************************************
* ~~ KBSlider.js Ver 1.5 ~~
* HORIZONTAL RANGE SLIDER
*
* Part of - KBSlider Project -
* Complete Div based /CSS/JS range slider
* ( Not using HTML Input )
*
* Copyright Kirk Siqveland 2022
*
*
**********************************************************************
KBSlider provides Range-Slider function using js and css
without jQuery or any external PHP code.
The CSS file does use PHP to simplify customization but the
CSS code can be used from a simple CSS file if desired.
This js file inserts the whole slider into your html file using
a div with the class "KBSlider" e.g.:
<div class="volume KBSlider" button="none"></div>
Note: the button attribute flags whether to show progress on the
slider button the two options are "display" and "none"
If there is a div with the class "feedback" we will use that to
display the progress as a Percent of progress along the slider.
***********************************************************************/
/********************** D I Y - P A R T S **************************/
// Define any text or symbol after the Range Value: e.g. "%"
var progSymbol = "%" ;
var BorderWidth = 1 ; // in pixels but use only number.
function KBSliderCallBack(Progress, Pixels = -1, maxPixels=-1){
// Add your Code to respond to slider Changes Here:
// Default Pixel values allow test if sent or not (must be positive)
// conole.log( "KBSlider Callback: Progress = " + Progress ) ;
// consoles.log( "Pixels = " + Pixels + " of " + maxPixels ) ;
}
/*/ *** HERE WE GO - This could be called from your Main *** /*/
runSlider();
/***********************************************************************/
/*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
/* The Rest Should Work Without Changes Below Here */
/* For Browsers with Javacript enebled */
/*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
var MySlider ;
function runSlider() {// The Whole Slider-Process Bundled into One Function:
// INJECT the Slider Components (within a Div with Class="KBSlider")
MySlider = document.getElementsByClassName('KBSlider')[0] ;
let addHTML = '<div class="progbox" tabindex="0"><div class="progbar" >' ;
addHTML = addHTML+'<div class = "dragframe">' ;
addHTML = addHTML+'<div class = "dragbtn" tabindex="-1">' ;
addHTML = addHTML+'</div></div></div></div>' ;
addHTML = addHTML+'<div class="fbDump"></div>' ;
MySlider.innerHTML = addHTML ;
var ProgBox = MySlider.querySelector(".progbox") ;
var ProgBar = MySlider.querySelector(".progbar") ;
var SliderFrame = MySlider.querySelector(".dragframe") ;
var FeedBack = MySlider.querySelector(".fbDump") ;
let tmpFBack = document.getElementById("feedback") ;
if(tmpFBack !== undefined && tmpFBack !== null){
FeedBack = document.getElementById("feedback") ; }
var DragBtn = MySlider.querySelector(".dragbtn") ;
if(MySlider.getAttribute("button") !== ("display"||"Display"))
{ MySlider.querySelector(".dragbtn").classList.add("hidden") ; }
var CurrRect, minPxR, adjPxR, maxPxR, BtnBox, HalfBox, MaxSize, Units ;
var setPercent = 0, Ratio = 0 ;
var altKey, hasFocus ;
/* ====================================================================== */
/* N O R M A L I Z E M O U S E W H E E L */
/* ====================================================================== */
var dyOpera = 40 ; // Opera
var dyFfox = 3 ; // Firefox;
var dyW3 = 120 ; // IE/Safari/Chrome
if((navigator.userAgent.toLowerCase()).indexOf("mac os x")> 0){
dyFfox = 1 ; // Firefox;
dyW3 = 3 ; // IE/Safari/Chrome
}
resizeme() ;
// Initialize:
updateProg(0) ;
ProgBox.classList.add("faded") ;
/********************** O P T I O N A L *************************/
// =================== F O R M I N P U T : ===================
// ==================== set Progress as Percent ================
// GUI 'Submit' button - to allow Form-Text input for Progress
var SlideInput = document.getElementById("SlideInput") ;
var SendBtn = document.getElementById("submit") ;
if (SendBtn !== undefined && SendBtn !== null )
{
// Create the Response to Submit button/ Enter Key from form
// This over-rides normal form-input behaviour.
function sendInputVal(){
updateProg(parseInt( 0 + SlideInput.value ) ) ;
}
SlideInput.addEventListener('keypress', function(event) {
if (event.key === "Enter") {
event.preventDefault() ;
sendInputVal() ;
}
});
SendBtn.addEventListener("click", function(event){
(event || window.event).preventDefault() ;
sendInputVal() ;
});
}
/*============================================================*/
/**************************************************************/
//======================================================================
// A D D E V E N T L I S T E N E R S :
/*______________________________________________________________*/
// Respond to Various Events:
document.addEventListener('keydown', function(e) {
// This uses Alt+k as shortcut to focus the KBSlider
if(e.altKey && e.keyCode === 75 ){ ProgBox.focus() ;}
});
window.onresize = resizeme ;
SliderFrame.onmousedown = StartSliderDrag ;
SliderFrame.ontouchstart = StartSliderPush ;
// ============= Keyboard and Mouse Responses ========================
window.addEventListener('DOMMouseScroll', wheelMove, {passive: false}) ;
window.addEventListener('mousewheel', wheelMove, {passive: false}) ;
//window.addEventListener('wheel', wheelMove, {passive: false} ) ;
ProgBox.addEventListener('focus', function() {
ProgBox.classList.remove("faded") ;
hasFocus = true ;
});
ProgBox.addEventListener('focusout', function() {
ProgBox.classList.add("faded") ;
hasFocus = false ;
});
ProgBox.addEventListener('mouseover', function() {
ProgBox.classList.remove("faded") ;
ProgBox.focus() ;
});
ProgBox.addEventListener('mouseout', function() {
if( hasFocus != true){ ProgBox.classList.add("faded") ; }
});
ProgBox.addEventListener('keydown', function(e) {
switch (e.keyCode) {
// case 16: // Shift-Key
// shiftKey = true ;
// break ;
case 33: // PgUp-Key
updateProg( 0) ;
break ;
case 34: // PgDn-Key
updateProg(100) ;
break ;
case 35: // End-Key
updateProg(100) ;
break ;
case 36: // Home-Key
updateProg( 0) ;
break ;
case 37: // Arrow-Key Left
if(e.shiftKey){
tapSlider(-10) ;
}else{
tapSlider( -1) ;
}
break ;
case 38: // Arrow-Key Up
if(e.shiftKey){
tapSlider(10) ;
}else{
tapSlider( 1) ;
}
break ;
case 39: // Arrow-Key Right
if(e.shiftKey){
tapSlider(10) ;
}else{
tapSlider( 1) ;
}
break ;
case 40: // Arrow-Key Down
if(e.shiftKey){
tapSlider(-10) ;
}else{
tapSlider( -1) ;
}
break ;
}
});
// Respond to Clicks along the Progress Bar
ProgBox.addEventListener('click', function(e) {
(e || window.event).preventDefault() ;
let setSize = (e.clientX - adjPxR) ;
if(setSize>Units){
if(setSize<MaxSize){
setSlider(setSize) ;
}else{ setPercent = 100 ;
fastProg(100) ; }
}else{ setPercent = 0 ;
fastProg( 0) ; }
ProgBox.focus() ;
hasFocus = true ;
});
// Move Slider Using Mouse Wheel
function wheelMove(event)
{
if(document.activeElement === ProgBox){
if (!event) event = window.event ;
//flac needed to block page scroll
event.preventDefault() ;
event.stopPropagation() ;
event.stopImmediatePropagation() ;
// normalize the delta results in 1 tick per wheel click
var delta=0, w=event.wheelDelta, d=event.detail ;
if (d){
if (w) return w/dyOpera>0?1:-1 ; // Opera
else delta = -d/dyFfox ; // Firefox;
} else delta = w/dyW3 ; // IE/Safari/Chrome
// Use Shift+Wheel to Make Large Movements
if(event.shiftKey){
delta = delta * 15 ;
}else{ delta = delta * 3 ; }
tapSlider( -delta) ;
//more flac to block page scroll
event.returnValue = false;
return false;
}
}
// ============ Slider Mouse on Button Response ======================
// Start a Drag sequence...
function StartSliderDrag(e) {
(e || window.event).preventDefault() ;
// set functions for Drag and CloseDrag:
document.onmousemove = sliderBtnDrag ;
document.onmouseup = closeBtnDrag ;
}
// Show Drag Motion
function sliderBtnDrag(e) {
/* trim responses to parallel X to ProgBox */
if(e.clientX > (minPxR+HalfBox)){
if(e.clientX < (maxPxR-HalfBox)){
(e || window.event).preventDefault() ;
setSlider( e.clientX - adjPxR ) ;
}else{ fastProg(100) ; }
}else{ fastProg( 0) ; }
}
// Finish a Drag Sequence (touch or mouse)
function closeBtnDrag() {
/* Clear functions when mouse button is released:*/
document.onmouseup = null ;
document.onmousemove = null ;
}
// ================ Touch Slider Response ============================
function StartSliderPush(e) {
(e || window.event).preventDefault() ;
document.ontouchmove = sliderBtnPush ;
document.ontouchend = EndSliderPush ;
document.ontouchcancel= EndSliderPush ;
}
function sliderBtnPush(e) {
/* trim responses to parallel X to ProgBox */
if(e.touches[0].clientX > (minPxR+HalfBox)){
if(e.touches[0].clientX < (maxPxR-HalfBox)){
(e || window.event).preventDefault() ;
setSlider( e.touches[0].clientX - adjPxR ) ;
}else{
(e || window.event).preventDefault() ;
fastProg(100) ; }
}else{
(e || window.event).preventDefault() ;
fastProg( 0) ; }
}
function EndSliderPush(e) {
document.ontouchmove = null ;
document.ontouchend = null ;
document.ontouchcancel = null ;
}
//======================================================================
// S L I D E R M O V E M E N T R E S P O N S E S
//======================================================================
function updateProg(pegPercent){
setPercent = parseInt(pegPercent) ;
if( setPercent < 0){ setPercent = 0 ;
}else if(setPercent > 100){ setPercent = 100 ;
}
let tmpProg = (setPercent * MaxSize) / 100 ;
ProgBar.style.width = tmpProg + HalfBox + "px" ;
SliderFrame.style.left = tmpProg + "px" ;
showString(setPercent) ;
KBSliderCallBack(setPercent);
}
function fastProg(pegPercent){
let setSize = HalfBox + (pegPercent * Units) ;
ProgBar.style.width = setSize + "px" ;
SliderFrame.style.left = setSize - HalfBox + "px" ;
showString(pegPercent) ;
// KBSliderCallBack(setPercent, setSize, MaxSize) ;
}
// =================== Position Slider by Pixels =====================
function setSlider(pegWidth){
setPercent = (pegWidth / MaxSize * 100) ;
updateProg(setPercent) ;
}
// ========== Position Slider by Percent / or Tick Marks =============
function tapSlider(pegShift){
setPercent = (setPercent + pegShift) ;
if(setPercent>0){
if(setPercent < 100){
updateProg(setPercent);
}else{ setPercent = 100 ;
fastProg(100) ; }
}else{ setPercent = 0 ;
fastProg( 0) ; }
}
// =============== Display Messages if desired =======================
function showString(msg){
FeedBack.innerHTML = msg+progSymbol ;
DragBtn.innerHTML = msg+progSymbol ;
}
//======================================================================
// ============= Establish Sizes for Responsive Design ===============
function resizeme(){
BtnBox = SliderFrame.getBoundingClientRect().width ;
HalfBox = ( BtnBox / 2) + BorderWidth ;
CurrRect = ProgBox.getBoundingClientRect() ;
maxPxR = CurrRect.left + CurrRect.width - BorderWidth ;
minPxR = CurrRect.left ;
adjPxR = ( minPxR + HalfBox ) ;
MaxSize = (CurrRect.width - (BtnBox + BorderWidth )) ;
Units = ( MaxSize / 100 ) ;
frameShift = parseInt(HalfBox / Units) ;
updateProg(setPercent) ;
}
} // -end- runSlider()
the CSS (using PHP to inject variables)
KBSlider CSS SOURCE CODE:
<?php
header("Content-type: text/css; charset: UTF-8");
/**
* ~~ KBSlider.css.php V 1.3 ~~
* CSS definitions for KBSlider Module
*
* Add correct parts to your HTML and,
* You Also Need KBSlider.js to work properly!
* See the Demo KBSlider.html file as an Example
*
* Part of - KBSlider Project -
* Complete Div based /CSS/JS range slider
* (Not using HTML Input)
*
* Copyright Kirk Siqveland 2022
*
*
*
**/
$FrameRadius = "22px" ;
$FrameBorderCol = skyblue ;
$FrameBGColor = "rgba(0, 0, 128, 1)" ;
$BorderRadius = "22px" ;
$BorderColor = skyblue ;
$ProgressColor = blue ;
$BackGroundColor = "#2196F3" ;
// $hideBtnText = false ;
$hideBtnText = True ;
$ButtonImage = "Loud.png" ;
/*-----------------------------------------------------*/
/* Advanced Configuration Below: */
/* - Automate Changes Using Above Variables - */
/*-----------------------------------------------------*/
if($BorderRadius){
if(!strpos($BorderRadius, "px")){
$BorderRadius += "px" ;
}
$BoxCorners = "border-radius: $BorderRadius $BorderRadius $BorderRadius $BorderRadius;" ;
}
if($FrameRadius){
if(!strpos($FrameRadius, "px")){
$FrameRadius += "px" ;
}
$Fcorners = "border-radius: $FrameRadius $FrameRadius $FrameRadius $FrameRadius;" ;
}
if(empty($ButtonImage)){
$SetBtnI = "" ;
}
if(!empty($ButtonImage)){
$SetBtnI = 'background: url("'.$ButtonImage.'"); ';
// background: url("'.$ButtonImage.'") no-repeat center center fixed ;
// no-repeat center center fixed;
// -webkit-background-size: 100% 100%;
// -moz-background-size: 100% 100%;
// -o-background-size: 100% 100%;
// background-size: 100% 100%;';
}
if($hideBtnText){$buttonText = "display: none" ;}
?>
/*\------------------\*-*-*/
/***\ - S T Y L E - \* */
/*-*-*\------------------\*/
#feedback{
display: block;
width: 34px;
text-align: center;
}
.centerme{
display: block;
margin-left: auto;
margin-right: auto;
}
.progbox{
border: 2px solid <?php echo $BorderColor?>;
background-color: <?php echo $BackGroundColor?>; */
top: 10px;
left: 20%;
width: 60% ;
<?php echo $BoxCorners?>
}
.progbox:focus { outline: 0; }
.progbar{
height: 34px;
background-color: <?php echo $ProgressColor?>;
}
.dragframe{
/*
!! Adjust BoxOffset in the KBSlider.js if border changes
*/
/*border: 1px solid <?php echo $FrameBorderCol;?> ; */
padding: 3px;
text-align: center;
height: 28px ;
border-radius: 4px 4px 4px 4px;
min-width: 28px;
background-color: <?php echo $FrameBGColor;?> ;
<?php echo $SetBtnI ;?>
background-size: cover;
<?php echo $Fcorners ;?>
}
.dragbtn{
display: inline;
padding: 3px;
cursor: pointer;
color: #fff;
font-size: 0.8em;
<?php echo $setHide ;?>
<?php echo $buttonText ;?>
}
.hidden{display: none; }
.fbDump{display: none; }
/*\------------------\*-*-*/
/***\ - FUNCTION - \* */
/*-*-*\------------------\*/
.progbox{
position: relative;
display: inline-block;
z-index: 7;
overflow: hidden;
}
.progbar{
position: relative;
top: 0;
left: 0;
z-index: 8;
}
.dragframe{
position: absolute;
z-index: 10 ;
overflow: hidden;
}
.dragbtn{
z-index: 9;
}
.faded{
opacity: 0.7 ;
}
In case anyone wants it... here's my Volume image (in SVG format): 
Contributed to public Domain
KBSlider Horizontal Range-Slider Code
Copyright © 2022 by Kirk Siqveland
Under CC-BY-NC-SA 4.0