CorniRange

Input Range

Styles

Style 1

Style 2

Style 3

Disabled

Options

Example


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/corniRange.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/corniRange.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
<!-- ... -->
<div class="corniRange style3" id="corniRange1"></div>
<!-- ... -->
<script type="text/javascript">
    corniRange('#corniRange1', {
        disabled: false,
        min: 0,
        max: 100,
        val: 50,
        step: 5,
        inputNumber: true,
        legend: false,
        progress: true,
        textValue: true,
        textBefore: 'Perc: ',
        textAfter: ' %'
    })
</script>
</body>
                

Get the value (Pure JS)


var valueCorniRange1 = document.querySelector('#corniRange1').children[2].children[0].value;
console.log(valueCorniRange1);
//50
                

Download

Files

Put HTML


<div class="corniRange style1" id="someId"></div>
                

Call the script


corniRange('#someId', {
        disabled: false, //By default false
        min: 0,
        max: 100,
        val: 50,
        step: 5,
        inputNumber: true, //show input[type="number"]
        legend: false, //show legend
        progress: true, //show progress bar
        textValue: true, //show value
        textBefore: 'Perc: ', //text before value
        textAfter: ' %' //text after value
    })
                

Add JS (corniRange.js)


//CorniRange by Luis Cornejo

'use strict';
var corniRange = function(sel, conf) {

    var selector = document.querySelector(sel);

    function CRange(el, conf, sel) {
        this.el = el;
        this.sel = sel;
        this.conf = conf;
    }

    CRange.prototype.structure = function() {

        //Input Number
        var containerInputNumber = document.createElement('div');

        var inputNumber = document.createElement('input');
        inputNumber.setAttribute('type', 'number');
        inputNumber.setAttribute('value', this.conf.val);
        inputNumber.setAttribute('min', this.conf.min);
        inputNumber.setAttribute('max', this.conf.max);
        inputNumber.setAttribute('step', this.conf.step);

        //Min
        var rangeMin = document.createElement('output');

        var min = document.createTextNode(this.conf.min);

        //Input Range
        var inputRange = document.createElement('input');
        var inputRangeContainer = document.createElement('div');
        inputRangeContainer.setAttribute('class', 'inputRangeContainer');

        inputRange.setAttribute('type', 'range');
        inputRange.setAttribute('min', this.conf.min);
        inputRange.setAttribute('max', this.conf.max);
        inputRange.setAttribute('value', this.conf.val);
        inputRange.setAttribute('step', this.conf.step);

        //Legend
        var legend = document.createElement('div');

        //Text value
        var textValue = document.createElement('div');
        var textValueBefore = document.createElement('span');
        var textValueCenter = document.createElement('span');
        var textValueAfter = document.createElement('span');
        textValue.setAttribute('class', 'textValue');
        textValue.appendChild(textValueBefore);
        textValue.appendChild(textValueCenter);
        textValue.appendChild(textValueAfter);
        textValueBefore.innerHTML = this.conf.textBefore;
        textValueAfter.innerHTML = this.conf.textAfter;

        //Progress append
        var s = document.createElement('style');
        document.body.appendChild(s);
        var progress = document.createElement('div');
        progress.setAttribute('class', 'progress');

        //Append elements

        this.el.appendChild(containerInputNumber);
        containerInputNumber.appendChild(inputNumber);

        this.el.appendChild(rangeMin);
        rangeMin.appendChild(min);
        this.el.appendChild(inputRangeContainer);
        inputRangeContainer.appendChild(inputRange);
        inputRangeContainer.appendChild(progress);
        
        this.el.appendChild(legend);
        this.el.appendChild(textValue);

        //Lengend style

        legend.setAttribute('class', 'legend');

        var pasos = (this.conf.max - this.conf.min) / this.conf.step;

        var pasosArray = [];
        var a = this.conf.min;

        for (var i = 0; i <= pasos; i++) {

            pasosArray.push(a)
            a += this.conf.step;
            var legendItem = document.createElement('span');

            legend.appendChild(legendItem);
            legendItem.innerHTML = pasosArray[i];

        }

        var legendF = function() {
            console.log(cRangeObj.el.offsetWidth)

            var anchoSumaSpan = cRangeObj.el.offsetWidth / pasosArray.length;

            legend.style.width = cRangeObj.el.offsetWidth + 'px';


            for (var i = 0; i < selector.children[3].children.length; i++) {

                selector.children[3].children[i].style.width = anchoSumaSpan + 'px';
                selector.children[3].children[i].style.display = 'inline-block';
            }
        }
        legendF()

        window.addEventListener("resize", legendF, false);

        //Add ids
        inputNumber.setAttribute('id', this.sel + '_corniRangeNumber');
        rangeMin.setAttribute('id', this.sel + '_corniRangeMin');
        inputRange.setAttribute('id', this.sel + '_corniRangeInput');
        rangeMin.setAttribute('name', this.sel + '_number');
        inputRange.setAttribute('name', this.sel + '_corniRangeInput');
        rangeMin.style.display = "none";

        var cObject = {};

        cObject.corniRangeNumber = document.getElementById(this.sel + '_corniRangeNumber');
        cObject.corniRangeMin = document.getElementById(this.sel + '_corniRangeMin');
        cObject.corniRangeInput = document.getElementById(this.sel + '_corniRangeInput');

        //Start
        cObject.corniRangeNumber.value = cObject.corniRangeInput.value;
        cObject.corniRangeMin.value = cObject.corniRangeInput.getAttribute("min");
        textValueCenter.innerHTML = cObject.corniRangeInput.value;

        var alturaInputRange = inputRange.offsetHeight;
        var x = ((cObject.corniRangeInput.value - cRangeObj.conf.min) * 100) / (cRangeObj.conf.max - cRangeObj.conf.min);
        var val = x + '%';
        progress.style.width = val;
        progress.style.height = alturaInputRange + 'px';
        
        //Input range change
        cObject.corniRangeInput.addEventListener('input', function() {

            cObject.corniRangeNumber.value = cObject.corniRangeInput.value;
            textValueCenter.innerHTML = cObject.corniRangeInput.value;

            var x = ((cObject.corniRangeInput.value - cRangeObj.conf.min) * 100) / (cRangeObj.conf.max - cRangeObj.conf.min);
            val = x + '%';            
            progress.style.width = val;
            progress.style.height = alturaInputRange + 'px';

        })

        //Input number change
        cObject.corniRangeNumber.addEventListener('change', function() {

            cObject.corniRangeInput.value = cObject.corniRangeNumber.value;
            textValueCenter.innerHTML = cObject.corniRangeInput.value;

            var x = ((cObject.corniRangeInput.value - cRangeObj.conf.min) * 100) / (cRangeObj.conf.max - cRangeObj.conf.min);
            val = x + '%';            
            progress.style.width = val;
            progress.style.height = alturaInputRange + 'px';
        })

        //By default is true
        if (this.conf.inputNumber === false) {
            cObject.corniRangeNumber.style.display = 'none';
        }
        if (this.conf.legend === false) {
            legend.style.display = 'none';
        }
        if (this.conf.textValue === false) {
            textValue.style.display = 'none';
        }
        if (this.conf.disabled === true) {
            inputRange.setAttribute('disabled', 'true')
        }
        if (this.conf.progress === false) {
            console.log(progress)
            progress.style.display = 'none';
        }


    }

    var cRangeObj = new CRange(selector, conf, sel);

    cRangeObj.structure()

}
                

Add CSS (corniRange.css)


input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    padding: 0;
    height: 5px;
    border: none;
    background: #ccc;
    position: relative;
}

.inputRangeContainer {
    position: relative;
}

.progress {
    width: 30px;
    height: 30px;
    background: #505050;
    position: absolute;
    top: 13px;
    left: 0;
}

input[type=range]:disabled {
    opacity: 0.5;
}

input[type=range]:disabled+.progress {
    opacity: 0;
    z-index: -1;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    z-index: 10;
    position: relative;
}

input[type=range]:disabled::-webkit-slider-thumb {
    cursor: disabled!important;
}

input[type=range]:focus {
    outline: none;
    border: none;
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    background: #ccc;
    cursor: pointer;
    margin-top: 0px;
}

input[type=range]::-moz-range-thumb {
    border: 0px solid #000000;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    background: #ccc;
    cursor: pointer;
}

input[type=range]::-ms-thumb {
    border: 0px solid #000000;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    background: #ccc;
    cursor: pointer;
}

/* Others */

.corniRange input[type="number"] {
    margin-bottom: 20px;
}

.corniRange {
    padding: 30px 0;
    overflow: hidden;
    position: relative;
}

.corniRange> div {
    position: relative;
}

.legend {
    padding: 10px 0;
}

.legend>span {
    text-align: center;
}

.textValue {
    text-align: center;
    padding: 20px 0;
}
                

Extra Style CSS


/* Style 1 */

.style1 input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    padding: 0;
    /* Change style */
    height: 5px;
    background: #ccc;
    border: none;
}

.style1 .progress {
    width: 30px;
    height: 30px;
    background: #505050;
    position: absolute;
    top: 13px;
    left: 0;
}

.style1 input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 1px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #ccc;
}

.style1 input[type=range]::-moz-range-thumb {
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 1px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #ccc;
}

.style1 input[type=range]::-ms-thumb {
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 1px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #ccc;
}


/* Style 2 */

.style2 input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    padding: 0;
    /* Change style */
    height: 5px;
    background: #ccc;
    border: none;
}

.style2 .progress {
    width: 30px;
    height: 30px;
    background: #505050;
    position: absolute;
    top: 13px;
    left: 0;
}

.style2 input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 1px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #ccc;
}

.style2 input[type=range]::-moz-range-thumb {
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 1px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #ccc;
}

.style2 input[type=range]::-ms-thumb {
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 1px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 1px 2px 0px #ccc;
}


/* Style 3 */

.style3 input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    padding: 0;
    /* Change style */
    height: 5px;
    background: #ccc;
    border: none;
}

.style3 .progress {
    width: 30px;
    height: 30px;
    background: #505050;
    position: absolute;
    top: 13px;
    left: 0;
}

.style3 input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 0px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0px 0px 0px 7px #505050;
}

.style3 input[type=range]::-moz-range-thumb {
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 0px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0px 0px 0px 7px #505050;
}

.style3 input[type=range]::-ms-thumb {
    margin-top: 0px;
    cursor: pointer;
    /* Change style */
    border: 0px solid #ccc;
    height: 36px;
    width: 36px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0px 0px 0px 7px #505050;
}