Creación de un control deslizante de rango en HTML usando JavaScript

Los controles deslizantes de rango se utilizan en las páginas web para permitir que el usuario especifique un valor numérico que no debe ser menor que un valor dado ni mayor que otro valor dado. Es decir, permite elegir el valor de un rango que se representa como un control deslizante.
Un control deslizante de rango generalmente se representa mediante un control deslizante o de marcación en lugar de un cuadro de entrada de texto como el tipo de entrada «número». Se usa cuando no se requiere ingresar el valor numérico exacto. Por ejemplo, el control deslizante de precios en el menú de filtro de la lista de productos en flipkart.com

Creación de un control deslizante de rango

Podemos crear un Control deslizante de rango utilizando HTML simple y JavaScript siguiendo los pasos a continuación:

Paso 1: Crear un elemento HTML.
El elemento deslizante se define en este paso utilizando el elemento «div» debajo del cual se encuentra un campo de entrada cuyo rango se define entre 1 y 100.

<div class="rangeslider">
  <input type="range" min="1" max="100" value="10"
                 class="myslider" id="sliderRange">
</div>

Paso 2: agregar CSS al elemento deslizante.

Defina el ancho del contenedor exterior.
```
.rangeslider{
    width: 50%;
    }
```

Defina CSS para el control deslizante como altura, ancho, fondo, opacidad, etc. para el control deslizante.

.myslider {
    -webkit-appearance: none;
    background: #FCF3CF  ;
    width: 50%;
    height: 20px;
    opacity: 2;
   }

Agregue efectos de desplazamiento del mouse.
```
.myslider:hover {
    opacity: 1;
}
```

Agregue WebKit para navegadores para cambiar el aspecto predeterminado de los controles deslizantes de rango.

.myslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: #34495E  ;
    width: 5%;
    height: 20px;
}

Paso 3: Adición de JavaScript al elemento deslizante.
Agregue el siguiente código JavaScript para mostrar el valor del control deslizante predeterminado.

var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;

rangeslider.oninput = function() {
  output.innerHTML = this.value;
}

Paso 4: Combina los elementos anteriores.

<!DOCTYPE html>
<html>
<style>
  
.rangeslider{
    width: 50%;
}
  
.myslider {
    -webkit-appearance: none;
    background: #FCF3CF  ;
    width: 50%;
    height: 20px;
    opacity: 2;
   }
  
  
.myslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    background: #34495E  ;
    width: 5%;
    height: 20px;
}
  
  
.myslider:hover {
    opacity: 1;
}
  
</style>
<body>
  
<h1>Example of Range Slider Using Javascript</h1>
<p>Use the slider to increment or decrement value.</p>
  
<div class="rangeslider">
  <input type="range" min="1" max="100" value="10"
                  class="myslider" id="sliderRange">
  <p>Value: <span id="demo"></span></p>
</div>
  
<script>
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("demo");
output.innerHTML = rangeslider.value;
  
rangeslider.oninput = function() {
  output.innerHTML = this.value;
}
</script>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta