Foros del Web - Ver Mensaje Individual

IsaBelM · #43 (**permalink**) 02/12/2014, 05:12

Emulando Input Type Range --> compatibilidad: todos los navegadores modernos. no incluido ie8

Código:

<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">

* {
    margin: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}



div.contenedorRango {
    width: 40%; /* el ancho del range con respecto a su elemento padre */
    margin: 2.75em auto;
    padding: 0 2em;
    background-color: rgb(224, 224, 224);
    border: .1em solid rgb(221, 20, 20);
}



div.contenedorRango > div.valorRango {
    width: 0;
    height: 1.55em;
    left: 0;
}



div.contenedorRango > div.valorRango > span.minimo {
    float: left;
    left: 0;
    font: bold .9em Verdana;
    color: rgb(68, 68, 62);
}



div.contenedorRango > div.valorRango > span.maximo {
    float: right;
    right: 0;
    font: bold .9em Verdana;
    color: rgb(68, 68, 62);
}



div.contenedorRango > div.rango {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}



div.contenedorRango > div.rango > div.bocadillo {
    width: 2.7em;
    height: auto;
    left: 1.5em; /*19px;*/
    top: 0; 
    margin-bottom: .5em;
    background-color: rgb(191, 191, 199);
    font: bold 80% Verdana;
    color: rgb(68, 68, 62);
    border-radius: .2em;
    border: 0.1em solid rgb(158, 158, 158);
    text-align: center;
    z-index: 2;
}



div.contenedorRango > div.rango > div.bocadillo:after {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -9px;
    left: 50%;
    display: block;
    content: "";
    margin-left: -3px;
    overflow: hidden;
    border: 4px solid rgba(0, 0, 0, 0);
    border-top-color: rgb(158, 158, 158);
}



div.contenedorRango > div.rango > div.scrollbar {
    width: 100%;
    height: .75em;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril {
    width: 100%;
    height: .6em;
    top: 10%;
    background-color: rgb(80, 69, 71);
    border-radius: 1em;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > input.inputTextValue {
    display: none;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra {
    width: 2.45em;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(191, 191, 199);
    border-radius: 3em;
    z-index: 2;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra:hover {
    cursor: move;
}



div.contenedorRango > div.rango > div.scrollbar > div.carril > div.progreso {
    width: 0;
    height: 100%; 
    background-color: rgb(47, 184, 28);
    border-radius: 1em;
}



div.contenedorRango > div.rango > ul.regla {
    width: 0;
    list-style-type: none;
    top: -19px;
    padding-left: 0;
    overflow: hidden;
    color: rgb(224, 224, 224);
}


div.contenedorRango > div.rango > ul.regla > li.num {
    width: 0;
    height: .25em;
    float: left;
    left: 0;
    top: 0;
    text-align: right;
    border-left: 1px solid rgb(15, 15, 15);
    border-right: 1px solid rgb(15, 15, 15);
}
</style>
<script type="text/javascript">
lib = {

    Evento : function(elemento, nomevento, fnc) {

        elemento.addEventListener(nomevento, fnc, false);
    },



    EventoEliminar : function(elemento, nomevento, fnc) {

        elemento.removeEventListener(nomevento, fnc, false);
    },



    cssComputado : function(obj, styleProp) {

        if (obj == null) { return 0; }

        var valor = window.getComputedStyle(obj, null)[styleProp];

        return valor;
    },



    EventoCancelar : function(evt) {

        evt.preventDefault();
    },



    EventoParar : function(evt) { 

        evt.stopPropagation();
    }

}



var Range = {

    reglaVisible : true, // boleano --> true / false
    min : [],
    max : [],
    step : [],
    inicia : [],
    barW : 0,
    trackW : 0,
    posInicialBocadillo : 0,
    nuevoMin : [],
    valorBocata : [],
    valorProgreso : 0,
    desplazamiento : 0,
    desplazamientoBoca : 0,
    barraLeft : 0,
    barraProgreso : null,
    bocata : null,
    dividirCarril : [],
    anchoCarril : [],
    offset1 : {}, 
    offset2 : {},
    ofset : 0,
    fooDrag : function() {},


    initRange : function() {

        Range.barW = parseInt(lib.cssComputado(document.querySelector('.barra'), 'width'));
        Range.trackW = parseInt(lib.cssComputado(document.querySelector('.carril'), 'width')),
        Range.posInicialBocadillo = parseInt(lib.cssComputado(document.querySelector('.bocadillo'), 'left'));

        Array.prototype.forEach.call(document.querySelectorAll('.contenedorRango'), function(rango, i) {

            Range.min.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-min'), 10));
            Range.max.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-max'), 10));
            Range.step.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-step'), 10));
            Range.inicia.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-inicia'), 10));

            Range.nuevoMin.push((Range.min[i] == 0) ? 1 : Range.min[i]);
            var dividirCar = parseInt((Range.trackW - Range.barW) / (Range.max[i] - Range.nuevoMin[i]), 10);
            var anchoCar = (dividirCar * (Range.max[i] - Range.nuevoMin[i]));

            Range.dividirCarril.push(parseInt(anchoCar / (Range.max[i] - Range.nuevoMin[i]), 10));

            Range.valorBocata.push(Range.inicia[i]-1);
            Range.anchoCarril.push(anchoCar);
            rango.querySelector('.minimo').textContent = Range.min[i];
            rango.querySelector('.maximo').textContent = Range.max[i];


            if (Range.reglaVisible) { 

                var ULregla = document.createElement('UL');
                ULregla.setAttribute('class', 'regla');
                rango.querySelector('.rango').appendChild(ULregla);

                for (var x = Range.step[i], regla = (Range.max[i] - Range.nuevoMin[i]), n = 0; x <= regla; x+=Range.step[i]) {

                    LIregla = document.createElement('LI');
                    LIregla.setAttribute('class', 'num');
                    ULregla.appendChild(LIregla);
                    rango.querySelectorAll('.num')[n++].style.width = ((Range.dividirCarril[i] * Range.step[i]) - 2) + 'px';
                }

                rango.querySelector('.regla').style.width = Range.anchoCarril[i] + 'px';
                rango.querySelector('.regla').style.paddingLeft = Range.barW + 'px';
            }


            rango.querySelector('.carril').style.width = (Range.anchoCarril[i] + Range.barW) + 'px';
            rango.querySelector('.valorRango').style.width = (Range.anchoCarril[i] + 10) + 'px';
            rango.querySelector('.valorRango').style.left = (Range.barW - 10) + 'px';
            rango.querySelector('.barra').style.left = (Range.inicia[i] <= 1) ? Range.inicia[i] + 'px' : (Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + 'px';
            rango.querySelector('.bocadillo').style.left = (Range.inicia[i] <= 1) ? (Range.inicia[i] + Range.posInicialBocadillo) + 'px' : ((Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + Range.posInicialBocadillo) + 'px';
            rango.querySelector('.bocadillo').textContent = (Range.inicia[i] <= 1) ? Range.nuevoMin[i] : (((Range.inicia[i] * Range.step[i]) + Range.nuevoMin[i]) - Range.step[i]);
            rango.querySelector('.progreso').style.width = (Range.inicia[i] <= 1) ? Range.inicia[i] + 'px' : ((Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + (Range.posInicialBocadillo / 2)) + 'px';
            
            Range.valorBocata[i] = rango.querySelector('.bocadillo').textContent;

            rango.querySelector('.inputTextValue').value = Range.valorBocata[i];

            lib.Evento(rango.querySelector('.barra'), 'mousedown', function(event) {Range.scrollRango(event, this, rango, i)});

        });

    },

continua en el siguiente post