CSS3 带数值提示框的范围输入界面控件

使用div构建input[type=range]类似范围选择的效果。

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1498
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/* para añadir reglas CSS  de manera dinámica*/
var s = document.createElement('style');
document.head.appendChild(s);
s.textContent = "";
/* un array de objetos */
var oInput = Array();

var inputDiv = document.querySelectorAll('.inputDiv');
var lng = inputDiv.length;

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

var elId = inputDiv[i].id;

oInput[i] = new Object();

oInput[i].value = inputDiv[i].getAttribute("data-value");
    oInput[i].width = parseInt(window.getComputedStyle(inputDiv[i], null).getPropertyValue("width"));
    oInput[i].Min = inputDiv[i].getAttribute("data-min");
    oInput[i].Max = inputDiv[i].getAttribute("data-max");

/* EL INPUT */
    var elInput = document.createElement('input');
    elInput.setAttribute("type", "range");
    elInput.setAttribute("value", oInput[i].value);

elInput.setAttribute("min", oInput[i].Min);
    elInput.setAttribute("max", oInput[i].Max);
    elInput.setAttribute("autocomplete", "off");
    elInput.style.width = oInput[i].width + "px";

inputDiv[i].appendChild(elInput);

/* LA ETIQUETA */
    /* el valor de la etiqueta (el tooltip) */
    var etiqueta = document.createElement('div');
    etiqueta.setAttribute("class", "etiqueta");
    etiqueta.innerHTML = oInput[i].value;

inputDiv[i].appendChild(etiqueta);

/* calcula la posición inicial de la etiqueta (el tooltip) */

// 500px / 100%
    oInput[i].pxls = oInput[i].width / 100;
    oInput[i].k = (oInput[i].Max - oInput[i].Min) / 100;

var porcienCalculado = Math.round((oInput[i].value - oInput[i].Min) / oInput[i].k);
    var valorCalculado = Math.round(porcienCalculado * oInput[i].pxls);

/* establece la posición de la etiqueta (el tooltip) */
    oInput[i].style = "#" + elId + " .etiqueta{left:" + (valorCalculado - 15) + "px}\n"; // 15 = la mitad de la anchura de la etiqueta 
    /* establece el estilo inicial del TRACK */
    oInput[i].style += "#" + elId + " input[type=range]::-webkit-slider-runnable-track{ background-image:-webkit-linear-gradient(left, HotPink " + porcienCalculado + "%,black " + porcienCalculado + "%)}\n";
    oInput[i].style += "#" + elId + " input[type=range]::-moz-range-track{ background-image:-moz-linear-gradient(left, HotPink " + porcienCalculado + "%,black " + porcienCalculado + "%)}\n"

s.textContent += oInput[i].style;

//-------------------------------------------------------------

elInput.addEventListener('input', function() {

var elId = this.parentNode.id;
        var j = elId.slice(1);

/* cambia el valor de la etiqueta (el tooltip) */
        var thisValue = this.value;
        document.querySelector('#' + elId + ' .etiqueta').innerHTML = thisValue;

var thisPorcien = (thisValue - oInput[j].Min) / oInput[j].k;
        var thisValorCalculado = thisPorcien * oInput[j].pxls;

/* cambia la posición de la etiqueta (el tooltip) */
        oInput[j].style = "#" + elId + " .etiqueta{left:" + (thisValorCalculado - 15) + "px}\n"; // 15 = la mitad de la anchura de la etiqueta  
        /* cambia el estilo del TRACK */
        oInput[j].style += "#" + elId + " input[type=range]::-webkit-slider-runnable-track{ background-image:-webkit-linear-gradient(left, HotPink " + thisPorcien + "%,black " + thisPorcien + "%)}\n";
        oInput[j].style += "#" + elId + " input[type=range]::-moz-range-track{ background-image:-moz-linear-gradient(left, HotPink " + thisPorcien + "%,black " + thisPorcien + "%)}\n";
        s.textContent = "";

for (var l = 0; l < lng; l++) {
            s.textContent += oInput[l].style
        }

}, false);

} //for( var i = 0; i< lng; i++){

编译

CSS

/* 1 */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
    background-color: #333;
}
input[type='range'] {
    display: block;
}
input[type='range']:focus {
    outline: none;
}
.inputDiv {
    width: 500px;
    margin: 150px auto;
    position: relative;
}
.etiqueta {
    width: 30px;
    height: 26px;
    position: absolute;
    z-index: 9;
    background-color: HotPink;
    color: white;
    font-size: 12px;
    text-align: center;
    padding-top: 7px;
    top: -45px;
}
.etiqueta:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 8;
    background-color: HotPink;
    position: relative;
    left: 9px;
    /*top:-1px;*/
    /* 2 */
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* 2.1 THUMB */
}
input[type=range]::-webkit-slider-thumb {
    background-color: #555;
    width: 20px;
    height: 20px;
    border: 3px solid #333;
    border-radius: 50%;
    margin-top: -9px;
}
input[type=range]::-moz-range-thumb {
    background-color: #555;
    width: 15px;
    height: 15px;
    border: 3px solid #333;
    border-radius: 50%;
}
input[type=range]::-ms-thumb {
    background-color: #555;
    width: 20px;
    height: 20px;
    border: 3px solid #333;
    border-radius: 50%;
    /* 2.2 TRACK */
}
input[type=range]::-webkit-slider-runnable-track {
    background-color: #555;
    height: 3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    outline: none;
}
input[type=range]::-moz-range-track {
    background-color: #555;
    height: 3px;
}
input[type=range]::-ms-track {
    background-color: #555;
    height: 3px;
}
input[type=range]::-ms-fill-lower {
    background-color: HotPink;
}
input[type=range]::-ms-fill-upper {
    background-color: black;
}

HTML

使用div构建input[type=range]类似范围选择的效果。

编辑器支持Emmet

快捷键

使用div构建input[type=range]类似范围选择的效果。

CSS3 带悬停信息提示框的水平时间线（紫红色调渐变背景）

CSS构建的材质化元素：带边框的文本输入框（text input）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：