D3 Examples - simple HTML + plain JS slider

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Slider</title>
    <style type="text/css">
    .slider-input-group{
        border: solid black 1px;
        padding-bottom: 50px;
        padding-top: 20px;
        padding-right: 100px;
        padding-left: 20px;
        display: block;
        width: 500px;
        height: 50px;
        box-sizing: border-box;  
    }
​
    .slider-in {
        width:100%;
    }
​
    .slider-out {
        position:relative;
        display: inline-block;
    }
​
    </style>
</head>
<body>
<h1>Slider!</h1>
<div class="slider-input-group">
    <input class="slider-in" id="my-slider-input" type="range" min="0" max="100" value="0" step="1">
    <output class="slider-out" for="my-slider-input" style=""></output>
</div>
</body>
<script type="text/javascript">
    
//How you use it
initSlider('.slider-input-group');
​
document.querySelector('.slider-input-group')
    .addEventListener('update', function(e){
        console.log(e.detail);
    });
​
    
// The implementation...
function initSlider(selector){
    const sliderThumbWidth = 15; //this is the value for chrome
    const sliderContainer = document.querySelector(selector);
    const slider = document.querySelector(selector + ' input');
    const output = document.querySelector(selector + ' output');
​
    function setOutput(){
        const outputRect = output.getBoundingClientRect();
        const inputRect = slider.getBoundingClientRect();
    //NOTE: the range over which the slider's 'thumb' can move is the length of the bar minus the width of the 'thumb'
    //NOTE: Also you may want to offset the output by a fixed amount with respect to this calculation, or something
        const xPosition = (slider.value / (slider.max - slider.min))*(inputRect.width-sliderThumbWidth);
        output.innerHTML = '$' + slider.value + ' million'; //could be supplied as a fomatter function
        output.style = 'left:'+xPosition+'px;'; 
        sliderContainer.dispatchEvent(new CustomEvent('update', { 'detail': slider.value }));       
    }
​
    slider.addEventListener('input', function(){
        setOutput();
    }); 
    setOutput();
}
​
</script>
</html>
    