Entrada deslizante de rango de fluido con JS y CSS3

Vista prévia

Descripción

Un control deslizante basado en JavaScript/CSS que convierte la entrada de rango normal en un deslizador de gama de fluidos de lujo.

Funcionamiento

Cree una entrada de rango normal con un elemento Label como estos:

<div class="slider-wrapper">

<input id="range-slider" class="fluid-slider" type="range" value="80" min="0" max="100">

<span id="range-label" class="range-label"></span>
</div>

El CSS para invalidar los estilos predeterminados del control deslizante de rango & los elementos de seguimiento.

.fluid-slider {

-webkit-appearance: none;

width: 300px;

height: 25px;

background: #c20042;

border-radius: 2px;

margin: 0;

position: relative;
}

.fluid-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 border-radius: 0;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 cursor: pointer;
 background: #fff;
 opacity: 0.65;
 border: 4px solid #c20042;
 position: relative;
 transition: all ease-in-out 0.05s;
}

.fluid-slider::-moz-range-thumb {
 -moz-appearance: none;
 appearance: none;
 border-radius: 0;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 cursor: pointer;
 background: #fff;
 opacity: 0.65;
 border: 4px solid #c20042;
 position: relative;
 transition: all ease-in-out 0.05s;
}

.fluid-slider:focus { outline: none; }
.fluid-slider:active::-webkit-slider-thumb {
 background: transparent;
}

.fluid-slider:active::-moz-range-thumb {
 background: transparent;
}

.fluid-slider:active + .range-label {

visibility: visible;

opacity: 1;

top: -75px;
}

.fluid-slider:before, .fluid-slider::after {

position: absolute;

content: '';

width: 40px;

padding: 0.5em;

background: #d0d0d0;

top: 50%;

transform: translateY(-50%);

box-sizing: border-box;

text-align: center;

font-weight: bold;

border-radius: 2px;
}

.fluid-slider:before {

left: -50px;

content: attr(min);
}

.fluid-slider:after {

right: -50px;

content: attr(max);
}

.range-label {

position: relative;

display: block;

width: 40px;

height: 40px;

top: -65px;

visibility: hidden;

opacity: 0;

background: #fff;

border-radius: 50%;

line-height: 30px;

text-align: center;

font-weight: bold;

font-size: 0.8em;

transform: translateX(-50%);

box-sizing: border-box;

border: 6px solid #c20042;

left: attr(value)20;

transition: all ease-in .05s;

z-index: -1;
}

.range-label:after {

position: absolute;

content: '';

top: 33px;

left: 50%;

transform: translateX(-50%);

width: 10px;

height: 8px;

background-repeat: no-repeat;

background-image: radial-gradient(circle, white 50%, transparent 50%), radial-gradient(circle, white 50%, transparent 50%), linear-gradient(#c20042, #c20042);

background-size: 180% 100%, 180% 100%, 100% 100%;

background-position: 150% 0%, -50% 0%, 100% 100%;
}

::-moz-range-track {
 background: #c20042;
 border: 0;
}

 input::-moz-focus-inner, input::-moz-focus-outer {
 border: 0;
}

El código JavaScript para actualizar los valores mostrados en la pista cuando se desliza.

var rangeSlider = document.getElementById("range-slider");

var rangeLabel = document.getElementById("range-label");

rangeSlider.addEventListener("input", showSliderValue, false);

function showSliderValue() {

rangeLabel.innerHTML = rangeSlider.value;

var labelPosition = (rangeSlider.value /rangeSlider.max);



if(rangeSlider.value === rangeSlider.min) {
 rangeLabel.style.left = ((labelPosition * 100) + 2) + "%";

} else if (rangeSlider.value === rangeSlider.max) {
 rangeLabel.style.left = ((labelPosition * 100) - 2) + "%";

} else {

rangeLabel.style.left = (labelPosition * 100) + "%";

}
}