Slider

El Input tipo Slider es un elemento de formulario interactivo que permite a los usuarios seleccionar un valor de un rango continuo de valores numéricos.electrónico.

Input text: Es un elemento de formulario que permite al usuario ingresar texto en un campo de texto en blanco. Por lo general, se utiliza para recolectar información textual como nombres, correos electrónicos, mensajes y otros tipos de datos de entrada similares.
Estado deshabilitado: Este estado se aplica a un campo de entrada de texto cuando no se permite que el usuario lo utilice. Por lo general, se utiliza para campos que no son aplicables o relevantes para el usuario, o para campos que solo pueden ser editados por ciertos usuarios o en ciertas circunstancias.
Estado de error: Este estado se aplica a un campo de entrada de texto cuando el usuario ha ingresado información incorrecta o incompleta. Por ejemplo, si un usuario omite un campo obligatorio o ingresa información en un formato incorrecto, se puede mostrar un mensaje de error junto al campo de entrada para indicar al usuario qué debe corregir.
Estado de advertencia: se utiliza para llamar la atención del usuario sobre una información ingresada o acción realizada en torno al input, que podría no sea un error, pero puede causar problemas si no se resuelve. Por ejemplo, cuándo se ingresa una contraseña insegura.
Estado de éxito: indica al usuario ha completado con éxito un formulario o un campo en particular. Se puede usar para dar comentarios positivos al usuario y alentarlo a continuar con el proceso de envío.

Paleta de Colores de Feedback

Color	Contraste / Blanco	Contraste / Negro
Verde éxito #00AA00	3.11:1	6.75:1
Amarillo advertencia #E3AE00	2.03:1	10.32:1
Rojo error #F24F4F	3.5:1	6.01:1
Celeste info #0176DE	4.52:1	4.65:1

Contraste no cumple con lo mínimo requerdio por el estandar WCAG 2.0

Cumple con el estandar WCAG 2.0 AA para textos desde 14px bold en adelante*

Cumple con el estandar WCAG 2.0 AA para textos desde 14px regular hasta 10px regular*

*Utilizando la tipografía Roboto

Slider

Slider normal

Ejemplo:

Cargando ...

<div class="uc-form-group" style="width: 350px;">
  <label class="uc-label-help">
    Barra de desplazamiento
    <span class="uc-tooltip" data-tippy-content="Texto de ayuda">
      <i class="uc-icon">info</i>
    </span>
  </label>
  <div class="uc-form-slider">
    <label for="range-1">Calificación de satisfacción</label>
    <input type="range" min="1" max="20" value="9" id="range-1"/>
  </div>
</div>

Slider deshabilitado

Ejemplo:

Cargando ...

<div class="uc-form-group" style="width: 350px;">
  <label>Barra de desplazamiento</label>
  <div class="uc-form-slider">
    <label for="range-1" class="disabled">Calificación de satisfacción</label>
    <input type="range" min="1" max="20" value="9" id="range-1" disabled/>
  </div>
</div>

Slider con estado de error

Ejemplo:

Cargando ...

<div class="uc-form-group uc-form-group--error" style="width: 350px;">
  <label>Barra de desplazamiento</label>
  <div class="uc-form-slider">
    <label for="range-1">Calificación de satisfacción</label>
    <input type="range" min="1" max="20" value="9" id="range-1"/>
  </div>
  <div class="uc-form-feedback">
    <i class="uc-icon">error</i>
    Debes aceptar los terminos y condiciones
  </div>
</div>

Slider con estado de advertencia

Ejemplo:

Cargando ...

<div class="uc-form-group uc-form-group--warning" style="width: 350px;">
  <label>Barra de desplazamiento</label>
  <div class="uc-form-slider">
    <label for="range-1">Calificación de satisfacción</label>
    <input type="range" min="1" max="20" value="9" id="range-1"/>
  </div>
  <div class="uc-form-feedback">
    <i class="uc-icon">warning</i>
    Mensaje de advertencia
  </div>
</div>

Slider con estado de éxito

Ejemplo:

Cargando ...

<div class="uc-form-group uc-form-group--success" style="width: 350px;">
  <label>Barra de desplazamiento</label>
  <div class="uc-form-slider">
    <label for="range-1">Calificación de satisfacción</label>
    <input type="range" min="1" max="20" value="9" id="range-1"/>
  </div>
  <div class="uc-form-feedback">
    <i class="uc-icon">check_circle</i>
    Mensaje de éxito
  </div>
</div>