Impresionante rango deslizante con Emoji pulgar-Emoji-Slider
| Autor: | pshihn |
|---|---|
| Views Total: | 271 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 15, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Un deslizador Emoji componente web que le permite crear deslizadores de rango Slim personalizados con los pulgares Emoji.
Funcionamiento
Instalación.
# NPM $ npm install emoji-slider --save
Importa el componente Emoji-Slider.
<script type="module" src="emoji-slider.js"></script>
Crea un deslizador de rango básico y especifica el Emoji usado para el pulgar.
<emoji-slider emoji="âš½"></emoji-slider>
Uso avanzado: escuche el cambio del deslizador y cambie el Emoji basado en el valor actual.
const rangeSlider = document.querySelector('emoji-slider');
rangeSlider.addEventListener('change', () => {
const v = rangeSlider.value;
if (v < 0.25) {
rangeSlider.emoji = '????';
} else if (v < 0.5) {
rangeSlider.emoji = '????';
} else if (v < 0.75) {
rangeSlider.emoji = '????';
} else {
rangeSlider.emoji = '????';
}
}); Personalice el tamaño del paso.
<emoji-slider emoji="âš½" step="2"></emoji-slider>
Establezca el valor inicial.
<emoji-slider emoji="âš½" value=".6"></emoji-slider>
Personaliza los colores.
.styledSlider {
--emoji-slider-bar-active-color: red;
--emoji-slider-bar-color: green;
}
.rangeSlider {
--emoji-slider-bar-active-color: #e5e5e5;
}
