Simple Flat HTML5 y CSS3 Range Slider
| Autor: | alexsafayan |
|---|---|
| Views Total: | 8,042 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 19, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Convierte HTML5 tipo de entrada = Range en un buen deslizador de rango de estilo plano construido encima de puro CSS/CSS3. Creado por < a href = "https://codepen.io/alexsafayan" target = "_ blank" rel = "noopener" > AlexSafayan .
Funcionamiento
Cree una entrada de rango HTML5 estándar en el documento.
<input type="range" value="20" class="demo">
El CSS para el estilo de la entrada de rango como un control deslizante de rango.
input {
-webkit-appearance: none;
width: 160px;
height: 20px;
margin: 10px 50px;
background: linear-gradient(to right, #16a085 0%, #16a085 100%);
background-size: 150px 10px;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
outline: none;
zoom: 130%;
display: block;
margin: auto;
margin-bottom: 30px;
} El CSS para el estilo del controlador del control deslizante de rango.
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #27ae60;
position: relative;
z-index: 3;
}
input::-webkit-slider-thumb:after {
content: " ";
width: 160px;
height: 10px;
position: absolute;
z-index: 1;
right: 20px;
top: 5px;
background: #2ecc71;
}
