ABSIS Cloud Galería de componentes estáticos

Las slider bars nos permiten asignar un valor numérico a un campo mediante una barra de desplazamiento, indicando algunos campos como las unidades, la precisión del número o el rango de valores.

Para poder implementar este componente necesitamos crear un div que tenga como class el valor slider-group-label-fixed

El div principal deberá contener 2 elementos:

• Label + campo: Consiste en un bloque de tipo div con la clase slider-label que contiene lo siguiente:
• Un bloque de tipo label que nos marca el texto que veremos delante del campo de texto. Tiene las siguientes peculiaridades:
  • El atributo for debe corresponderse con el identificador del campo (descrito a continuación)
  • El cuerpo del bloque debe contener el texto que queremos visualizar
• Un bloque de tipo input que nos marca el campo de texto que se rellenará con el slider. Tiene las siguientes características:
• El atributo id debe ser único, ya que es el identificador del campo y, como se ha explicado en el punto anterior, debe corresponder con el campo for de la etiqueta.
• El atributo name debe concordar con el identificador.
• El atributo type debe tener el valor text
• El cuerpo del bloque estará vacío
• Un bloque de tipo span, sin atributos, que debe contener las unidades que queremos visualizar detrás del campo
• Slider: Consiste en un bloque de tipo div con la clase slider-container que contiene el siguiente elemento:
  • Un bloque de tipo input, sin cuerpo, con los siguientes atributos:
    • type debe tener el valor slider
    • value debe tener un valor numérico, correspondiente al valor inicial del slider. Este valor se verá reflejado en el campo de texto al cargar la app
    • data-min debe tener un valor numérico, correspondiente al valor mínimo del slider
    • data-max debe tener un valor numérico, correspondiente al valor máximo del slider
    • data-increment debe tener un valor numérico, correspondiente a la precisión del slider. Cada posición que avance o retroceda el slider, este valor se sumará o restará al campo de texto
    • data-input-id debe corresponderse con el valor id del campo de texto que hemos definido anteriormente
    • data-pre-label contiene el texto que queremos que se visualice delante del valor emergente del slider
    • data-post-label contiene el texto que queremos que se visualice detrás del valor emergente del slider
    • data-min-label contiene el texto que queremos que se muestre bajo el extremo izquierdo del slider
    • data-max-label contiene el texto que queremos que se muestre bajo el extremo derecho del slider
    • data-under-error contiene el error que queremos mostrar bajo el slider en caso que el valor sea inferior al mínimo
    • data-over-error contiene el error que queremos mostrar bajo el slider en caso que el valor sea superior al máximo
    • data-format corresponde al formato numérico en el que queremos que se pinte el valor, tanto emergente como dentro del campo. El formato se define con los siguientes elementos
    • # indica una cifra, que puede mostrarse o no según el valor a representar
    • 0 también indica una cifra, que se mostrará siempre independientemente de si el valor a representar tiene un número inferior de cifras
    • . indica el separador decimal. Se visualizará como una coma, pero debe representarse en el formato como un punto.
    • , indica el separador de millares. Se visualizará como un punto, pero debe representarse en el formato como una coma.

  												
  <div class="slider-group-label-fixed">
  	<div class="slider-label">
  		<label for="importe">Importe: </label>
  		<input id="importe" name="importe" type="text" />
  		<span>€</span>
  	</div>
  	<div class="slider-container">
  		<input 	value="20000" 
  				type="slider" 
  				data-min="1000"
  				data-max="60000" 
  				data-increment="1000" 
  				data-input-id="importe"
  				data-pre-label="" 
  				data-post-label="€" 
  				data-min-label="1.000€"
  				data-max-label="60.000€"
  				data-under-error="El importe mínimo es de 1.000 €" 
  				data-over-error="El importe máximo es de 60.000 €"
  				data-format="#,###.#" />
  	</div>
  </div>
  
  											

  Para que se aplique el comportamiento dinámico será necesario incorporar al cerrar el body de la página los ficheros javascript siguientes:

  												
  ...
  </body>
  <absiscloud:static type="script" source="absiscloud" path="components/jquery/1.8.2/jquery-1.8.2.min.js"/>
  <absiscloud:static type="script" source="absiscloud" path="components/jslider/0.0/js/jshashtable-2.1_src.js"/>
  <absiscloud:static type="script" source="absiscloud" path="components/jquery.numberformatter/1.2.3/jquery.numberformatter-1.2.3.min.js"/>
  <absiscloud:static type="script" source="absiscloud" path="components/jslider/0.0/bin/jquery.slider.min.js"/>
  <absiscloud:static type="script" source="absiscloud" path="js/acstatic-apps.js"/>