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:
>Show More<
<!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:
>Show More<
/**********************************************************************
 *          ~~ 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:
>Show More<
<?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